您的位置：首页 > Web前端 > JavaScript

javascript实现节点（div）名称编辑

2018-10-12 14:05 701 查看

节点html代码如下：



<div class="img_1" id="img_1" >

     <input type="image" class="img_1" src="img/cump.png"></input>

     <div class="noteText" id="noteTxt" type="text" ondblclick ="changeName(this.id);">123</div>

</div>

js编辑noteTxt文本，function如下：



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

        }

        }

     }

     //获得css文件中的样式

     function getStyle(obj, attr)

     {

        if(obj.currentStyle)   

        {

        return obj.currentStyle[attr];  //IE

        }else{               

        return getComputedStyle(obj,false)[attr];  //FF

     }

     }

css如下：



.img_1 {  

    width: 80px;

    height:70px;

    position:absolute;    

}

.noteText {

    width:80px;

    height:15px;

    text-align:center;

    margin-top:70px;

    word-break:break-all; 

}

代码非常的简单，这里就不多做解释了，下伙伴们可以自由发挥下，使用到自己的项目中去。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航