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全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
jquery实现提示语淡入效果
May 05 jQuery
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
express express-session的使用小结
Dec 12 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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
PHP URL路由类实例
2013/11/12 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
django自定义模板标签过程解析
2019/12/14 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
高三毕业典礼演讲稿
2014/05/13 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
财务会计专业求职信
2014/06/09 职场文书
监护人证明
2015/06/19 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript