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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
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
多人战的战术与战略
2020/03/04 星际争霸
php自定义加密与解密程序实例
2014/12/31 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python 实现两个npy档案合并
2020/07/01 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
python飞机大战游戏实例讲解
2020/12/04 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
美国校服网上商店:French Toast
2019/10/08 全球购物
《尊严》教学反思
2014/02/11 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
《假如》教学反思
2016/02/17 职场文书
小数乘法教学反思
2016/02/22 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
Python编写冷笑话生成器
2022/04/20 Python