javascript學(xué)習(xí)筆記(二十) 獲得和設(shè)置元素的特性(屬性)
更新時(shí)間:2012年06月20日 20:32:49 作者:
javascript學(xué)習(xí)筆記之獲得和設(shè)置元素的特性(屬性)介紹,學(xué)習(xí)js的朋友可以參考下
本節(jié)html以下面的為例
<div id="myDiv" class="bd" title="我是div">
<img id="img1" />
<a id="myA" >百度</a>
</div>
1.通過(guò)HTMLElement類(lèi)型(對(duì)象)的屬性獲得和設(shè)置元素特性
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//取得元素特性
alert(div.id); //"myDiv"
alert(div.className); //"bd",這里不是div.class,是因?yàn)閏lass是保留關(guān)鍵字
alert(div.title); //"我是div"
alert(a.href); //http://www.baidu.com
//設(shè)置元素特性
div.id = "myDiv2"; //id改為"myDiv2"
div.className = "ft"; //class改為"ft",如果存在名為"ft"的樣式,會(huì)立刻變?yōu)?ft"樣式,瀏覽器會(huì)立刻反應(yīng)出來(lái)
div.title = "我是myDiv2"; //title改為"我是myDiv2"
div.align = "center"; //設(shè)置居中對(duì)齊
img.src ="images/img1.gif"; //設(shè)置圖片路徑
a.innerHTML ="新浪"; //"百度"改為"新浪"
a.; //重新設(shè)置超鏈接
2.通過(guò)getAttribute()、setAttribute()和removeAttribute() 方法,獲取、設(shè)置、移除元素的特性(不推薦使用,前兩個(gè)方法IE6,7中有異常,第三個(gè)方法IE6不支持,設(shè)置自定義特性時(shí)可以使用)
getAttribute() 方法,用來(lái)獲取元素特性。接受一個(gè)參數(shù),即要獲得元素的特性名
setAttribute() 方法,用來(lái)設(shè)置元素特性。接受兩個(gè)參數(shù),即要獲得元素的特性名和特性值
removeAttribute() 方法,用來(lái)移除元素的特性。接受一個(gè)參數(shù),即要移除元素的特性名
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//取得元素特性
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd",注意這里是class,而不是className,與上面不同
alert(div.getAttribute("title")); //"我是div"
alert(a.getAttribute("href")); //http://www.baidu.com
//設(shè)置元素特性
div.setAttribute("id","myDiv2"); //id改為"myDiv2"
div.setAttribute("class","ft"); //class改為"ft",這里同樣是class,而不是className
div.setAttribute("title","我是myDiv2"); //title改為"我是myDiv2"
div.setAttribute("align","center"); //設(shè)置居中對(duì)齊
img.setAttribute("src","images/img1.gif"); //設(shè)置圖片路徑
//移除元素特性
div.removeAttribute("class"); //移除class特性
3.通過(guò)attributes屬性,獲取、設(shè)置、移除元素的特性
var div = document.getElementById("myDiv");
//取得元素特性
alert(div.attributes["id"].nodeValue); //"myDiv"
//設(shè)置元素特性
div.attributes["id"].nodeValue = "myDiv2"; //id改為"myDiv2"
//移除元素特性
div.attributes.removeNamedItem("class"); //移除class特性
復(fù)制代碼 代碼如下:
<div id="myDiv" class="bd" title="我是div">
<img id="img1" />
<a id="myA" >百度</a>
</div>
1.通過(guò)HTMLElement類(lèi)型(對(duì)象)的屬性獲得和設(shè)置元素特性
復(fù)制代碼 代碼如下:
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//取得元素特性
alert(div.id); //"myDiv"
alert(div.className); //"bd",這里不是div.class,是因?yàn)閏lass是保留關(guān)鍵字
alert(div.title); //"我是div"
alert(a.href); //http://www.baidu.com
//設(shè)置元素特性
div.id = "myDiv2"; //id改為"myDiv2"
div.className = "ft"; //class改為"ft",如果存在名為"ft"的樣式,會(huì)立刻變?yōu)?ft"樣式,瀏覽器會(huì)立刻反應(yīng)出來(lái)
div.title = "我是myDiv2"; //title改為"我是myDiv2"
div.align = "center"; //設(shè)置居中對(duì)齊
img.src ="images/img1.gif"; //設(shè)置圖片路徑
a.innerHTML ="新浪"; //"百度"改為"新浪"
a.; //重新設(shè)置超鏈接
2.通過(guò)getAttribute()、setAttribute()和removeAttribute() 方法,獲取、設(shè)置、移除元素的特性(不推薦使用,前兩個(gè)方法IE6,7中有異常,第三個(gè)方法IE6不支持,設(shè)置自定義特性時(shí)可以使用)
getAttribute() 方法,用來(lái)獲取元素特性。接受一個(gè)參數(shù),即要獲得元素的特性名
setAttribute() 方法,用來(lái)設(shè)置元素特性。接受兩個(gè)參數(shù),即要獲得元素的特性名和特性值
removeAttribute() 方法,用來(lái)移除元素的特性。接受一個(gè)參數(shù),即要移除元素的特性名
復(fù)制代碼 代碼如下:
var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//取得元素特性
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd",注意這里是class,而不是className,與上面不同
alert(div.getAttribute("title")); //"我是div"
alert(a.getAttribute("href")); //http://www.baidu.com
//設(shè)置元素特性
div.setAttribute("id","myDiv2"); //id改為"myDiv2"
div.setAttribute("class","ft"); //class改為"ft",這里同樣是class,而不是className
div.setAttribute("title","我是myDiv2"); //title改為"我是myDiv2"
div.setAttribute("align","center"); //設(shè)置居中對(duì)齊
img.setAttribute("src","images/img1.gif"); //設(shè)置圖片路徑
//移除元素特性
div.removeAttribute("class"); //移除class特性
3.通過(guò)attributes屬性,獲取、設(shè)置、移除元素的特性
復(fù)制代碼 代碼如下:
var div = document.getElementById("myDiv");
//取得元素特性
alert(div.attributes["id"].nodeValue); //"myDiv"
//設(shè)置元素特性
div.attributes["id"].nodeValue = "myDiv2"; //id改為"myDiv2"
//移除元素特性
div.attributes.removeNamedItem("class"); //移除class特性
相關(guān)文章
Zero Clipboard js+swf實(shí)現(xiàn)的復(fù)制功能使用方法
如何使用 Zero Clipboard ,其實(shí)注意測(cè)試環(huán)境要在 web環(huán)境中。2010-03-03JavaScript中的關(guān)聯(lián)數(shù)組問(wèn)題
這篇文章主要介紹了JavaScript中的關(guān)聯(lián)數(shù)組問(wèn)題的相關(guān)資料,需要的朋友可以參考下2015-03-03Javascript基礎(chǔ)教程之函數(shù)對(duì)象和屬性
這篇文章主要介紹了Javascript基礎(chǔ)教程之函數(shù)對(duì)象和屬性,需要的朋友可以參考下2015-01-01在JavaScript中處理時(shí)間之setMinutes()方法的使用
這篇文章主要介紹了在JavaScript中處理時(shí)間之setMinutes()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06詳解Bootstrap 學(xué)習(xí)(一)入門(mén)
這篇文章主要介紹了Bootstrap入門(mén)學(xué)習(xí),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04帶你了解session和cookie作用原理區(qū)別和用法
這篇文章主要介紹了session和cookie作用原理,區(qū)別和用法,以及使用過(guò)程中的優(yōu)缺點(diǎn),通過(guò)列舉區(qū)別和原理,使讀者更能理解兩者之間的關(guān)系,需要的朋友可以參考下2017-08-08document.all的一個(gè)比較完整的總結(jié)及案例
document.all想必學(xué)習(xí)javascript的同學(xué)們都很了解吧,本文主要是針對(duì)一些剛?cè)腴T(mén)的童鞋們做一下有關(guān)document.all的相關(guān)總結(jié),感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-01-01