Der HTML -Code des Knotens lautet wie folgt:
Die Codekopie lautet wie folgt:
<div id = "img_1">
<Eingabe type = "Bild" Src = "img/cump.png"> </input>
<div id = "Notetxt" type = "text" ontdblclick = "ChangEname (this.id);"> 123 </div>
</div>
JS Bearbeiten Notetxt -Text, die Funktion lautet wie folgt:
Die Codekopie lautet wie folgt:
Funktionswechselnde (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 ("Eingabe");
text.type = "text";
text.id = "noteInput";
text.style.width = getStyle (Notetxt, 'width');
text.style.height = getStyle (Notetxt, 'Höhe');
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= "Keine";
Div.removechild (Text);
}
}
}
// Erhalten Sie den Stil in der CSS -Datei
Funktion getStyle (OBJ, Attr)
{
if (obj.currentStyle)
{
return obj.currentStyle [attr]; // dh
}anders{
return getComputedStyle (obj, falsch) [attr]; // ff
}
}
CSS ist wie folgt:
Die Codekopie lautet wie folgt:
.img_1 {
Breite: 80px;
Höhe: 70px;
Position: absolut;
}
.notetext {
Breite: 80px;
Höhe: 15px;
Text-Align: Mitte;
Rand: 70px;
Wortausbruch: Break-All;
}
Der Code ist sehr einfach, daher werde ich ihn hier nicht erklären. Freunde können es frei benutzen und in ihren eigenen Projekten verwenden.