javascript实现节点(div)名称编辑


Posted in Javascript onDecember 17, 2014

节点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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 #Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 #Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 #Javascript
js实现编辑div节点名称的方法
Dec 17 #Javascript
node.js中的fs.futimes方法使用说明
Dec 17 #Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 #Javascript
node.js中的fs.exists方法使用说明
Dec 17 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
javascript 获取网页参数系统
2008/07/19 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js变换显示图片的实例
2013/04/16 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
python中实现精确的浮点数运算详解
2017/11/02 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
pytorch 共享参数的示例
2019/08/17 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python 绘制正态曲线的示例
2020/09/24 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
融资合作协议书范本
2014/10/17 职场文书
老乡会致辞
2015/07/28 职场文书
小学副班长竞选稿
2015/11/21 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python