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查找父节点的简单方法
Jun 28 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
python网络编程实例简析
2014/09/26 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Order by的几种用法
2013/06/16 面试题
什么是索引指示器
2012/08/20 面试题
会计电算化应届生求职信
2013/11/03 职场文书
《童年》教学反思
2014/02/18 职场文书
升职自荐信怎么写
2015/03/05 职场文书
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript