每個(gè)HTML屬性對(duì)應(yīng)相應(yīng)的DOM對(duì)象操作
屬性操作
-
getAttribute()- 獲取元素的attribute值
讀:
var attribute = Element.getAttribute(attributeName) //括號(hào)里帶引號(hào)
-
setAttribute(name,value)- 用于設(shè)置元素屬性
-
createAttribute()- 生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)贷洲，并返回它仗阅。
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
等同于
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
-
romoveAttribute()- 用于刪除元素屬性
node.removeAttribute('id');
-
dataset自定義HTMLElement.datasetdata-*屬性集- 元素上保存數(shù)據(jù)
html
<li data-id="123456" data-account-name="wwq"
data-name="魏文慶" data-email="wwq123@163.com"
data-mobile="13524543878">wwq</li>
li.dataset.
id //"123456"
accountName //"wwq"
樣式操作
外部樣式表
內(nèi)聯(lián)樣式
更新樣式
-
element.style- 設(shè)置在了內(nèi)聯(lián)樣式上,優(yōu)先級(jí)最高
- 更新一個(gè)屬性需要一個(gè)語(yǔ)句
element.style.borderColor = 'red';
element.style.color = 'red';
-
element.style.cssText- 樣式混在邏輯中
element.style.cssText = 'border-color:red;color:red;';
獲取樣式
style獲取的不一定是實(shí)際樣式值
- Class操作
window.getComputedStyle()
var style = window.getComputedStyle(element)
window.getComputedStyle(element).color //#fff;
ie-9使用element.currentStyle做兼容
CSS DOM overview
