Maison > interface Web > js tutoriel > le corps du texte

méthode js pour modifier les compétences du nom du nœud div_javascript

WBOY
Libérer: 2016-05-16 16:26:05
original
894 Les gens l'ont consulté

L'exemple de cet article décrit la méthode de modification des noms de nœuds div dans js. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

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 :
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);
>
>
>

//Récupérer 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 ;
>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal