js實(shí)現(xiàn)編輯div節(jié)點(diǎn)名稱的方法

更新時(shí)間：2014年12月17日 11:07:40 投稿：shichen2014

這篇文章主要介紹了js實(shí)現(xiàn)編輯div節(jié)點(diǎn)名稱的方法,可實(shí)現(xiàn)針對div節(jié)點(diǎn)名稱的編輯及樣式的選擇效果,并且分別針對IE與FF瀏覽器的樣式進(jìn)行了選擇與控制,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)編輯div節(jié)點(diǎn)名稱的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

節(jié)點(diǎn)html代碼如下：

復(fù)制代碼代碼如下:

<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如下：

復(fù)制代碼代碼如下:

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如下：

復(fù)制代碼代碼如下:

.img_1 {
    width: 80px;
    height:70px;
    position:absolute;
}

.noteText {
    width:80px;
    height:15px;
    text-align:center;
    margin-top:70px;
    word-break:break-all;
}

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

如何利用JavaScript編寫一個(gè)格斗小游戲
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫一個(gè)格斗小游戲，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對回調(diào)函數(shù)概念的理解,需要的朋友可以參考下
2014-09-09
javascript判斷機(jī)器是否聯(lián)網(wǎng)的2種方法
只有機(jī)器已經(jīng)聯(lián)網(wǎng)以后，web應(yīng)用才能啟動，下面使用javascript判斷機(jī)器是否聯(lián)網(wǎng)，具體判斷代碼如下，有此需求的朋友可以參考下
2013-08-08
10種JavaScript最常見的錯(cuò)誤(小結(jié))
這篇文章主要介紹了10種JavaScript最常見的錯(cuò)誤(小結(jié))，查看了數(shù)千個(gè)項(xiàng)目后，發(fā)現(xiàn)了 10 個(gè)最常見的 JavaScript 錯(cuò)誤。我們會告訴你什么原因?qū)е铝诉@些錯(cuò)誤，以及如何防止這些錯(cuò)誤發(fā)生
2019-06-06
JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽函數(shù)的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實(shí)例形式分析了javascript事件綁定的常用技巧與注意事項(xiàng),需要的朋友可以參考下
2017-11-11
簡單談?wù)刟xios中的get,post方法
下面小編就為大家?guī)硪黄唵握務(wù)刟xios中的get,post方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
javascript溫習(xí)的一些筆記基礎(chǔ)常用知識小結(jié)
在電腦上找到多年前的javascript的一些小筆記，因?yàn)橐獙⒐P記本上面的文件整理一下，不用的刪除掉，所以將此篇筆記再發(fā)布一下，存檔到自己的博客吧，電腦上的文件就刪除了
2011-06-06
禁止頁面刷新讓F5快捷鍵及右鍵都無效
禁止頁面刷新讓F5快捷鍵及右鍵都無效，下面有個(gè)不不錯(cuò)的實(shí)現(xiàn)方法，大家可以感受下
2014-01-01
JavaScript實(shí)現(xiàn)微信小程序打卡時(shí)鐘項(xiàng)目實(shí)例
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)微信小程序打卡時(shí)鐘項(xiàng)目實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
修改ligerui 默認(rèn)確認(rèn)按鈕的方法
下面小編就為大家?guī)硪黄薷膌igerui 默認(rèn)確認(rèn)按鈕的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-12-12