js实现编辑div节点名称的方法

 更新时间:2014年12月17日 11:07:40   投稿:shichen2014  
这篇文章主要介绍了js实现编辑div节点名称的方法,可实现针对div节点名称的编辑及样式的选择效果,并且分别针对IE与FF浏览器的样式进行了选择与控制,具有一定的参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js实现编辑div节点名称的方法。分享给大家供大家参考。具体实现方法如下:

节点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;
}

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

  • 如何利用JavaScript编写一个格斗小游戏

    如何利用JavaScript编写一个格斗小游戏

    这篇文章主要给大家介绍了关于如何利用JavaScript编写一个格斗小游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 理解javascript中的回调函数(callback)

    理解javascript中的回调函数(callback)

    这篇文章主要介绍了理解javascript中的回调函数(callback),本文着重于对回调函数概念的理解,需要的朋友可以参考下
    2014-09-09
  • javascript判断机器是否联网的2种方法

    javascript判断机器是否联网的2种方法

    只有机器已经联网以后,web应用才能启动,下面使用javascript判断机器是否联网,具体判断代码如下,有此需求的朋友可以参考下
    2013-08-08
  • 10种JavaScript最常见的错误(小结)

    10种JavaScript最常见的错误(小结)

    这篇文章主要介绍了10种JavaScript最常见的错误(小结),查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生
    2019-06-06
  • JavaScript实现为事件句柄绑定监听函数的方法分析

    JavaScript实现为事件句柄绑定监听函数的方法分析

    这篇文章主要介绍了JavaScript实现为事件句柄绑定监听函数的方法,结合实例形式分析了javascript事件绑定的常用技巧与注意事项,需要的朋友可以参考下
    2017-11-11
  • 简单谈谈axios中的get,post方法

    简单谈谈axios中的get,post方法

    下面小编就为大家带来一篇简单谈谈axios中的get,post方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • javascript温习的一些笔记 基础常用知识小结

    javascript温习的一些笔记 基础常用知识小结

    在电脑上找到多年前的javascript的一些小笔记,因为要将笔记本上面的文件整理一下, 不用的删除掉, 所以将此篇笔记再发布一下,存档到自己的博客吧, 电脑上的文件就删除了
    2011-06-06
  • 禁止页面刷新让F5快捷键及右键都无效

    禁止页面刷新让F5快捷键及右键都无效

    禁止页面刷新让F5快捷键及右键都无效,下面有个不不错的实现方法,大家可以感受下
    2014-01-01
  • JavaScript实现微信小程序打卡时钟项目实例

    JavaScript实现微信小程序打卡时钟项目实例

    这篇文章主要为大家介绍了JavaScript实现微信小程序打卡时钟项目实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • 修改ligerui 默认确认按钮的方法

    修改ligerui 默认确认按钮的方法

    下面小编就为大家带来一篇修改ligerui 默认确认按钮的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12

最新评论