每个HTML属性对应相应的DOM对象操作
属性操作
-
getAttribute()- 获取元素的attribute值
读:
var attribute = Element.getAttribute(attributeName) //括号里带引号
-
setAttribute(name,value)- 用于设置元素属性
-
createAttribute()- 生成一个新的属性对象节点，并返回它。
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-*属性集- 元素上保存数据
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"
样式操作
外部样式表
内联样式
更新样式
-
element.style- 设置在了内联样式上,优先级最高
- 更新一个属性需要一个语句
element.style.borderColor = 'red';
element.style.color = 'red';
-
element.style.cssText- 样式混在逻辑中
element.style.cssText = 'border-color:red;color:red;';
获取样式
style获取的不一定是实际样式值
- Class操作
window.getComputedStyle()
var style = window.getComputedStyle(element)
window.getComputedStyle(element).color //#fff;
ie-9使用element.currentStyle做兼容
CSS DOM overview
