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 XML数据显示为HTML一例
Dec 23 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 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数组总结篇(一)
2008/09/30 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
python3中int(整型)的使用教程
2017/03/23 Python
详解Python:面向对象编程
2019/04/10 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
性能测试工程师的面试题
2015/02/20 面试题
2014年元旦活动方案
2014/02/15 职场文书
企业宗旨标语
2014/06/10 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
学子宴致辞大全
2015/07/27 职场文书
公司保洁员管理制度
2015/08/04 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript