javaScript-DOM（二）

四、属性操作

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