노드 HTML 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<div id = "img_1">
<입력 유형 = "image"src = "img/cump.png"> </input>
<div id = "notetxt"type = "text"ondblClick = "ChangeName (this.id);"> 123 </div>
</div>
JS EDIT NOTETXT 텍스트 편집 함수는 다음과 같습니다.
코드 사본은 다음과 같습니다.
함수 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 ( "입력");
text.type = "텍스트";
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.select ();
text.onblur = function () {
notetxt.style.display = "block";
notetxt.innerhtml = text.value;
//text.style.display= "None";
Div.RemoveChild (텍스트);
}
}
}
// CSS 파일에서 스타일을 얻습니다
기능 getstyle (obj, attr)
{
if (obj.currentStyle)
{
return obj.currentStyle [attr]; //즉
}또 다른{
return getComputedStyle (obj, false) [attr]; // ff
}
}
CSS는 다음과 같습니다.
코드 사본은 다음과 같습니다.
.img_1 {
너비 : 80px;
높이 : 70px;
위치 : 절대;
}
.notetext {
너비 : 80px;
높이 : 15px;
텍스트 정렬 : 센터;
마진-탑 : 70px;
단어 브레이크 : 브레이크-alf;
}
코드는 매우 간단하므로 여기서 설명하지 않습니다. 친구는 자유롭게 사용하여 자신의 프로젝트에서 사용할 수 있습니다.