DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 三種方法實現獲得和設置以及移除元素屬性
javascript 三種方法實現獲得和設置以及移除元素屬性
編輯:關於JavaScript     
以下面的html為例
復制代碼 代碼如下:
<div id="myDiv" class="bd" title="我是div">
<img id="img1" />
<a id="myA" href = "http://www.baidu.com">百度</a>
</div>

1.通過HTMLElement類型(對象)的屬性獲得和設置元素特性
復制代碼 代碼如下:
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,是因為class是保留關鍵字
alert(div.title); //"我是div"
alert(a.href); //http://www.baidu.com
//設置元素特性
div.id = "myDiv2"; //id改為"myDiv2"
div.className = "ft"; //class改為"ft",如果存在名為"ft"的樣式,會立刻變為"ft"樣式,浏覽器會立刻反應出來
div.title = "我是myDiv2"; //title改為"我是myDiv2"
div.align = "center"; //設置居中對齊
img.src ="images/img1.gif"; //設置圖片路徑
a.innerHTML ="新浪"; //"百度"改為"新浪"
a.href = "http://www.sina.com.cn"; //重新設置超鏈接

2.通過getAttribute()、setAttribute()和removeAttribute() 方法,獲取、設置、移除元素的特性(不推薦使用,前兩個方法IE6,7中有異常,第三個方法IE6不支持,設置自定義特性時可以使用)
getAttribute() 方法,用來獲取元素特性。接受一個參數,即要獲得元素的特性名
setAttribute() 方法,用來設置元素特性。接受兩個參數,即要獲得元素的特性名和特性值
removeAttribute() 方法,用來移除元素的特性。接受一個參數,即要移除元素的特性名
復制代碼 代碼如下:
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
//設置元素特性
div.setAttribute("id","myDiv2"); //id改為"myDiv2"
div.setAttribute("class","ft"); //class改為"ft",這裡同樣是class,而不是className
div.setAttribute("title","我是myDiv2"); //title改為"我是myDiv2"
div.setAttribute("align","center"); //設置居中對齊
img.setAttribute("src","images/img1.gif"); //設置圖片路徑
//移除元素特性
div.removeAttribute("class"); //移除class特性

3.通過attributes屬性,獲取、設置、移除元素的特性
復制代碼 代碼如下:
var div = document.getElementById("myDiv");
//取得元素特性
alert(div.attributes["id"].nodeValue); //"myDiv"
//設置元素特性
div.attributes["id"].nodeValue = "myDiv2"; //id改為"myDiv2"
//移除元素特性
div.attributes.removeNamedItem("class"); //移除class特性
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved