JavaScript implementation node (DIV) name editing _javascript tips

The node HTML code is as follows:

Copy Code code 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 edit Notetxt text, function is as follows:

Copy Code code 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);
}
}
}
Get the styles in a CSS file
function GetStyle (obj, attr)
{
if (Obj.currentstyle)
{
return obj.currentstyle[attr]; Ie
}else{
Return getComputedStyle (Obj,false) [attr]; Ff
}
}

CSS is as follows:

Copy Code code 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;
}

The code is very simple, here is no more explanation, the next partners can be free to play, use to their own projects to go.