快捷導(dǎo)航

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類型（對(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特性 

您可能感興趣的文章: