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


Posted in Javascript onDecember 17, 2014

本文实例讲述了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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
JavaScript实现微信号随机切换代码
Mar 09 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
node.js中的fs.futimes方法使用说明
Dec 17 #Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 #Javascript
node.js中的fs.exists方法使用说明
Dec 17 #Javascript
node.js中的fs.openSync方法使用说明
Dec 17 #Javascript
node.js中的fs.open方法使用说明
Dec 17 #Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 #Javascript
node.js中的fs.close方法使用说明
Dec 17 #Javascript
You might like
利用PHP将部分内容用星号替换
2020/04/21 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
react-router中的属性详解
2017/06/01 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
shiro授权的实现原理
2017/09/21 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
理解Python中的类与实例
2015/04/27 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python 导入数据及作图的实现
2019/12/03 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
外贸英语毕业生自荐信
2013/11/14 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
邮政员工辞职信
2014/01/16 职场文书
悬空寺导游词
2015/02/05 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
Python集合的基础操作
2021/11/01 Python
24年收藏2000多部退役军用电台
2022/02/18 无线电