快捷導(dǎo)航

javascript實現(xiàn)節(jié)點（div）名稱編輯

更新時間：2014年12月17日 11:40:02 投稿：hebedich

這篇文章主要介紹了js實現(xiàn)節(jié)點（div）名稱編輯,需要的朋友可以參考下

節(jié)點html代碼如下：

<div class="img_1" id="img_1" >

     <input type="image" class="img_1" src="img/cump.png"></input>

     <div class="noteText" id="noteTxt" type="text" ondblclick ="changeName(this.id);">123</div>

</div>

js編輯noteTxt文本，function如下：

復(fù)制代碼代碼如下:

     function changeName(noteTxtId){

        var noteTxt = document.getElementById(noteTxtId);

        noteTxt.style.display= "none";//.style.display= "block" 

        var div = noteTxt.parentNode;

        if(!document.getElementById("noteInput")){

            var text=document.createElement("input");

            text.type="text";

            text.id="noteInput";

            text.style.width=getStyle(noteTxt,'width');

            text.style.height=getStyle(noteTxt,'height');

            text.style.marginTop=getStyle(noteTxt,'marginTop');

            text.style.textAlign=getStyle(noteTxt,'textAlign');

            text.value=noteTxt.innerHTML;

            div.appendChild(text);

            text.select();

            text.onblur=function(){

                noteTxt.style.display= "block";

                noteTxt.innerHTML=text.value;

                //text.style.display= "none";

                div.removeChild(text);

        }

        }

     }

     //獲得css文件中的樣式

     function getStyle(obj, attr)

     {

        if(obj.currentStyle)   

        {

        return obj.currentStyle[attr];  //IE

        }else{               

        return getComputedStyle(obj,false)[attr];  //FF

     }

     }

css如下：

復(fù)制代碼代碼如下:

.img_1 {  

    width: 80px;

    height:70px;

    position:absolute;    

}

.noteText {

    width:80px;

    height:15px;

    text-align:center;

    margin-top:70px;

    word-break:break-all; 

}

代碼非常的簡單，這里就不多做解釋了，下伙伴們可以自由發(fā)揮下，使用到自己的項目中去。

您可能感興趣的文章: