四、属性操作
1)property accessor(属性访问器) // 能获取对象
<div>
<label for="userName>用户名:</label>
<input id="userName" type="text" class="u-text">
</div>
input.className; // "u-text"
input.["id"] // "userName"
2)get/setAttribute() // 都是属性字符串！
input.getAttribute("class"); // "u-text"
3)element.dataset(Html5) // 属性字符串！
自定义属性
例子：
dataset参考文章
注 :兼容dataset
function dataSet(element){
if(element.dataset){
return element.dataset;
//优先遵循W3C规范
}else{
var results=[]; //建立空数组
var attrs=element.attributes; //得到所有的属性
for(i=0;i<attrs[i].length;i++){ //遍历所有的元素
var attrName=attrs[i].name;
if(/^data-/.test(attrName)){ //筛选出名字为'data-'开头的属性
var attrValue=attrs[i].value; //得到属性值
var newName=attrName.slice(5); //去掉'data-'
if(newName.replace(/\-\w+/g,function(word){ //去掉'-'，并且将属性的首字母大写
return word.substring(1,2).toUpperCase()+word.substring(2);
})){
results[newName]=attrValue; //填充数组
}
}
}
}
return results; //返回结果
五、样式操作
1) css操作对应的dom对象
css操作对应的dom对象
2) cssStyleDeclaration
element.sheet
element.style
element.style.cssText
注 : css属性批量设置，但样式写在逻辑里(js)bad,
推荐：通过替换类名改变样式
附 ：更换样式表
例: 换肤
<link href="XX"> // 操作时替换(添加、删除)该样式表
3) window.getComputedStyle() (ie9+)
element.style 获取的不一定是正确的样式(只获取嵌入的样式)
var style = window.getComputedStyle(element) // 获取的是只读属性
window.getComputedStyle(element).color
4) css overview
css overview
5) 练习
实现getStyle函数
getStyle函数用于获取元素的实际样式，语法如下：
var cssPropertyValue = getStyle (element, cssPropertyName)；
使用示例如下：
getStyle(element, "color") 返回element元素的显示颜色，如："rgb(0, 0, 0)"
getStyle(element, "line-height") 返回element元素的实际行高，如："30px"
请实现getStyle函数，要求浏览器兼容。
function getStyle(element,cssProertyName){
if(window.getComputedStyle){
return window.getcomputedStyle(element,null)[cssPropertyName];
}
else{
return element.currentStyle[cssPropertyName];
}
}
