Javascript implémente les compétences d'édition du nom de nœud (div)_javascript

Le code html du nœud est le suivant :

Copier le code Le code est le suivant :

123

js édite le texte noteTxt, la fonction est la suivante :

Copier le code Le code est le suivant :

Fonction changeName(noteTxtId){
        var noteTxt = document.getElementById(noteTxtId);
          noteTxt.style.display= "none";//.style.display= "block"
        var div = noteTxt.parentNode;
Si(!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);
>
>
>
//Récupère le style dans le fichier CSS
Fonction getStyle(obj, attr)
{
Si(obj.currentStyle)
           {
           return obj.currentStyle[attr] //IE
                                                                                                                 return getComputedStyle(obj,false)[attr] //FF
; >
>

css est le suivant :

Copier le code Le code est le suivant :

.img_1 {
Largeur : 80 px ;
hauteur:70px;
Position : absolue ;
>
.noteTexte {
Largeur : 80 px ;
hauteur:15px;
Text-align:center;
Marge supérieure : 70 px ;
Mot-break : break-all ;
>

Le code est très simple, je ne l'expliquerai donc pas ici. Les amis peuvent y jouer librement et l'utiliser dans leurs propres projets.