javaScript-DOM（二）

四、属性操作

1)property accessor(属性访问器) // 能获取对象

   


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

五、样式操作

1) css操作对应的dom对象

css操作对应的dom对象

2) cssStyleDeclaration

element.sheet

element.style

element.style.cssText

注 : css属性批量设置，但样式写在逻辑里(js)bad,
推荐：通过替换类名改变样式

附 ：更换样式表
例: 换肤

 // 操作时替换(添加、删除)该样式表

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];
    }
}