首頁 > web前端 > js教程 > javascript學習筆記(二十) 獲得並設定元素的特性(屬性)_基礎知識

javascript學習筆記(二十) 獲得並設定元素的特性(屬性)_基礎知識

WBOY
發布: 2016-05-16 17:52:23
原創
1009 人瀏覽過

本節html以下面的為例

複製程式碼 程式碼如下:

1.透過HTMLElement類型(物件)的屬性取得與設定元素特性
複製程式碼 程式碼如下:

var div = document.getElementById("myDiv");
var img = document.getElementBy2" ");
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特性複製程式碼


程式碼如下:


var div = document.getElementById("myDiv");
//取得元素特性
alert(div.attributes["id"].nodeValue); //"myDiv"
//設定元素特性
div.attributes["id"].nodeValue = "myDiv2"; //id改為"myDiv2" //移除元素特性div.attributes.removeNamedItem("class"); //移除class特性
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板