js实现编辑div节点名称的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery.jstree 增加节点的双击事件代码

    jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • js 表格排序(编辑+拖拽+缩放)

    Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over

  • JS实现鼠标单击与双击事件共存

    一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件.开始也觉得不就是给按钮绑下两个事件而已罢了--只是后来才明白,是我想得太简单,在双击事件触发的同时也会触发单击的~囧 通过一番研究后,终于利用JS中"setTimeout"延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • js修改table中Td的值(定义td的双击事件)

    客户需求至上. 这次是更改后的代码,去掉了"确定","取消"按钮.变单击为双击事件,用户按ESC键,取消更改. 复制代码 代码如下: //为每个Td添加双击事件 function ReWritable() { var tbmian=document.getElementById("tbmain"); //循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加. for(var i=1;i<tbmain.row

  • Js实现双击鼠标自动滚动屏幕的示例代码

    如下所示: 复制代码 代码如下: <html><head> <script language="javascript" type="text/javascript">//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){  timer=setInterval("scrollwindow()",30);}function sc(){  clearInter

  • js添加删除行和双击变文本框的脚本

    js添加删除行和双击变文本框---阿会楠练习作品 *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:5px; } #myTable tr td{ padding:5px; } function $(obj){ return document.getElementById

  • js使下拉列表框可编辑不止是选择

    复制代码 代码如下: <script> function clearOption(obj,e){ var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; if(currKey == 8){ obj.options[0].text = ""; } } function writeSelect(obj,e){ var currKey=0,e=e||event; currKey=e.keyCode||e.

  • js实现双击单元格变成文本输入框效果代码

    单击单元格,将其变为文本框 // 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ""; var txt = document.createElement("input"); txt.type = "text"; txt.value = tdValue; txt.id = "_text_000000000_"

  • js实现双击图片放大单击缩小的方法

    本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击图片放大,单击缩小</title> </head> <body> <SCRIPT

  • JS实现即点即编辑功能代码

    JS实现即点即编辑功能代码

    效果如图所示:分享代码喽: " + "" + " "; newTd.onclick = Function("switchShow(true, "+currEndLineId+", "+currTab+")"); } function saveContent(){ var inputContentDiv = document.getElementById("inputContentDiv_

  • JS实现双击编辑可修改状态的方法

    JS实现双击编辑可修改状态的方法

    本文实例讲述了JS实现双击编辑可修改状态的方法.分享给大家供大家参考.具体如下: 这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表单的一个例子,下面的这段代码就实现了用户名和签名档的双击可编辑功能. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-double-click-edit-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

随机推荐