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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
layui导航栏实现代码
May 19 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 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
PHP学习之PHP运算符
2006/10/09 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
php多任务程序实例解析
2014/07/19 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
python基础教程之字典操作详解
2014/03/25 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
用Eclipse写python程序
2018/02/10 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
python中如何写类
2020/06/29 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
致长跑运动员广播稿
2014/01/31 职场文书
继承公证书样本
2014/04/04 职场文书
天猫活动策划方案
2014/08/21 职场文书
保护动物的宣传语
2015/07/13 职场文书