Kode HTML simpul adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<Div id = "img_1">
<input type = "Image" src = "img/cump.png"> </input>
<div id = "notetxt" type = "text" ondBlClick = "ChangeName (this.id);"> 123 </div>
</div>
JS Edit Teks Notetxt, fungsinya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
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 (teks);
text.select ();
text.onblur = function () {
notetxt.style.display = "block";
notetxt.innerHtml = Text.Value;
//text.style.display= "none";
div.removechild (teks);
}
}
}
// Dapatkan gaya dalam file CSS
Fungsi GetStyle (OBJ, ATTR)
{
if (obj.currentstyle)
{
kembalikan obj.currentstyle [attr]; //YAITU
}kalau tidak{
return getComputedStyle (obj, false) [attr]; // ff
}
}
CSS adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
.img_1 {
Lebar: 80px;
Tinggi: 70px;
Posisi: Absolute;
}
.notoText {
Lebar: 80px;
Tinggi: 15px;
Teks-Align: tengah;
margin-top: 70px;
Word-Break: Break-all;
}
Kode ini sangat sederhana, jadi saya tidak akan menjelaskannya di sini. Teman dapat menggunakannya dengan bebas dan menggunakannya dalam proyek mereka sendiri.