javaScript-DOM(二)

2017-01-14  本文已影响0人  冰已凋零

四、属性操作

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];
    }
}
上一篇 下一篇

猜你喜欢

热点阅读