javascript实现节点（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;
}

代码非常的简单，这里就不多做解释了，下伙伴们可以自由发挥下，使用到自己的项目中去。

赞 (0)

相关推荐

  • 用javascript读取xml文件读取节点数据

    下面代码是读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> <script type="text/javascript"> var objLength = null; var xmlHttp; var strurl = ""; function ajaxrequst() { if (window.ActiveXObject) { xmlHttp = new ActiveXO

  • javascript使用appendChild追加节点实例

    本文实例讲述了javascript使用appendChild追加节点的方法.分享给大家供大家参考.具体分析如下: DOM树节点的增加,实例代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodep = document.createElement('p');//创建p节点  var art = document.createTextNo

  • JavaScript动态添加style节点的方法

    本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style.styleSheet.cssText =

  • javascript删除元素节点removeChild()用法实例

    本文实例讲述了javascript删除元素节点removeChild()用法.分享给大家供大家参考.具体分析如下: 操作DOM节点的方法:removeChild(),移除子节点,那么可以变通一下来实现移除指定的节点,我们可以先去找到要删除节点的父节点,然后在父节点中运用removeChild来移除我们想移除的节点. function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentEleme

  • Javascript节点关系实例分析

    本文实例分析了Javascript的节点关系.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>节点关系</title> <script typ

  • javascript动态修改Li节点值的方法

    本文实例讲述了javascript动态修改Li节点值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

  • JavaScript实现获得所有兄弟节点的方法

    本文实例讲述了JavaScript获得所有兄弟节点的方法.分享给大家供大家参考.具体如下: 这段代码先获得元素父节点,然后获得其父节点的所有子节点,然后删除自己便是所有兄弟节点 function sibling(elem){ var r=[]; var childs=elem.parentNode.childNodes; for(var i=0,len=childs.length;i<len;i++){ if(childs[i].nodeType==1&&childs[i]!=ele

  • javascript 获取HTML DOM父、子、临近节点

    在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同i

  • javascript实现节点（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" ty

  • JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析

    本文实例讲述了JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作.分享给大家供大家参考,具体如下: createElement,createTextNode,appendChild,insertBefore,removeChild,replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p>

  • JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    JavaScript DOM节点操作实例小结(新建,删除HTML元素)

    本文实例讲述了JavaScript DOM节点操作方法.分享给大家供大家参考,具体如下: 使用DOM可以新建HTML元素,也可以删除已有的HTML元素. (一)新建元素: <script> //创建新的 <p> 元素 var newEle=document.createElement("p"); //创建文本节点 var node=document.createTextNode("这是使用Javascript创建的新段落."); //将文本节

  • javascript 通过封装div方式弹出div窗体

    javascript 通过封装div方式弹出div窗体

    图1(弹出一个div) 图2(弹出多个)构造函数: 复制代码 代码如下: var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){ this.popup =popup ; this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度,用来定位在

  • JavaScript实现节点的删除与序号重建实例

    JavaScript实现节点的删除与序号重建实例

    本文实例讲述了JavaScript实现节点的删除与序号重建.分享给大家供大家参考.具体如下: 这里演示JavaScript节点的删除与重建方法,删除节点后,会自动重新建立节点,序号自动排列,比如删除当前的第3条数据后,第4条的序号会智能变为3,以此类推,保证序号不乱. 运行效果如下图所示: 删除前: 删除后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww

  • JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

  • javascript实现相同事件名称，不同命名空间的调用方法

    本文实例讲述了javascript实现相同事件名称,不同命名空间的调用方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  • Javascript获取表单名称（name）的方法

    本文实例讲述了Javascript获取表单名称(name)的方法.分享给大家供大家参考.具体如下: 下面的代码通过表单的name属性获得表单名称 <!DOCTYPE html> <html> <body> <form id="frm1" name="form1"> First name: <input type="text" name="fname" value="

  • JavaScript DOM节点操作方法总结

    JavaScript DOM节点操作方法总结

    节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的

  • JavaScript实现图片DIV竖向滑动的方法

    本文实例讲述了JavaScript实现图片DIV竖向滑动的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

随机推荐