js實(shí)現(xiàn)編輯div節(jié)點(diǎn)名稱的方法
本文實(shí)例講述了js實(shí)現(xiàn)編輯div節(jié)點(diǎn)名稱的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
節(jié)點(diǎn)html代碼如下：
<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如下：
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如下：
width: 80px;
height:70px;
position:absolute;
}
.noteText {
width:80px;
height:15px;
text-align:center;
margin-top:70px;
word-break:break-all;
}
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- javascript實(shí)現(xiàn)的一個(gè)隨機(jī)點(diǎn)名功能
- 使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序
- JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
- js中使用DOM復(fù)制（克隆）指定節(jié)點(diǎn)名數(shù)據(jù)到新的XML文件中的代碼
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名小功能
- JavaScript實(shí)現(xiàn)班級(jí)隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器實(shí)例詳解
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名程序
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫一個(gè)格斗小游戲，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
理解javascript中的回調(diào)函數(shù)(callback)
這篇文章主要介紹了理解javascript中的回調(diào)函數(shù)(callback),本文著重于對(duì)回調(diào)函數(shù)概念的理解,需要的朋友可以參考下2014-09-09
javascript判斷機(jī)器是否聯(lián)網(wǎng)的2種方法
只有機(jī)器已經(jīng)聯(lián)網(wǎng)以后，web應(yīng)用才能啟動(dòng)，下面使用javascript判斷機(jī)器是否聯(lián)網(wǎng)，具體判斷代碼如下，有此需求的朋友可以參考下2013-08-08
10種JavaScript最常見(jiàn)的錯(cuò)誤(小結(jié))
這篇文章主要介紹了10種JavaScript最常見(jiàn)的錯(cuò)誤(小結(jié))，查看了數(shù)千個(gè)項(xiàng)目后，發(fā)現(xiàn)了 10 個(gè)最常見(jiàn)的 JavaScript 錯(cuò)誤。我們會(huì)告訴你什么原因?qū)е铝诉@些錯(cuò)誤，以及如何防止這些錯(cuò)誤發(fā)生2019-06-06
JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽(tīng)函數(shù)的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)為事件句柄綁定監(jiān)聽(tīng)函數(shù)的方法,結(jié)合實(shí)例形式分析了javascript事件綁定的常用技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
簡(jiǎn)單談?wù)刟xios中的get,post方法
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)刟xios中的get,post方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
javascript溫習(xí)的一些筆記 基礎(chǔ)常用知識(shí)小結(jié)
在電腦上找到多年前的javascript的一些小筆記，因?yàn)橐獙⒐P記本上面的文件整理一下， 不用的刪除掉， 所以將此篇筆記再發(fā)布一下，存檔到自己的博客吧， 電腦上的文件就刪除了2011-06-06
禁止頁(yè)面刷新讓F5快捷鍵及右鍵都無(wú)效，下面有個(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
下面小編就為大家?guī)?lái)一篇修改ligerui 默認(rèn)確認(rèn)按鈕的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12