js implements a method to edit the name of the div node

This article illustrates an example of how js implements an div node name. Share with you for your reference. The specific implementation method is as follows:

The code of node html is as follows:

<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 edits noteTxt text, function as follows:

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);

        }

        }

     }
     // To obtain css Styles in file 

     function getStyle(obj, attr)

     {

        if(obj.currentStyle)   

        {

        return obj.currentStyle[attr];  //IE

        }else{               

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

     }

}

css is as follows:

.img_1 {  

    width: 80px;

    height:70px;

    position:absolute;    

}
.noteText {

    width:80px;

    height:15px;

    text-align:center;

    margin-top:70px;

    word-break:break-all; 

}

I hope this article has been helpful to your javascript programming.