js-04 自定义属性

一、获取元素的样式

1. 标准浏览器中：ie浏览器不支持

getComputedStyle(元素).样式;

所有的点后面也可以用中括号代替，中括号需要加引号；

比如：getcomputedStyle(box)['width'];

2. ie8以下浏览器获取样式的方法：

元素.currentStyle.样式； 也是可以用中括号写；

二、自定义属性

1. 为什么要自定义属性：

如果声明一个flag为true，则所有的标签都是使用flag这个标识的，前一个改变，后一个因为使用的是前一个的标识，所以也改变了，则需要为每一个元素都添加一个标识，叫做自定义属性，每一个元素都有一个flag标识，就互不影响了；

2. 自定义索引值：

索引一般用于下标一一对应的，比如抽奖翻牌，假设每个按钮对应的奖项都是定好了的，都存放在数组中，第一个按钮对应数组中第一个元素，依次类推。点击某个按钮就需要显示相对应下标的奖项，则我们需要把下标存下来，叫自定义索引（其实也是自定义属性）。

定义：div.name= value；

获取：div.name；

更改：div.name = new；

自定义属性值可以是任何数据类型的；

for(var i=0;i<odiv.length;i++){
    odiv[i].flag = true; //给每个div加一个新的属性；
    odiv[i].onclick = function(){
        if(this.flag){ //如果这个div的这个flag属性为true，则改变；
            this.style.background = "blue";
            this.flag = false; //让这个div的flag属性为false
        }else{
            this.style.background = "red";
            this.flag = true;
        }
    }
}

自定义属性解决的问题：

for(var j=0;j<li.length;j++){
    li[j].onmouseover = function(){
        this.style.background = arr[j];   //数组放在事件中是无法循环的
    }
}

解决办法：

for(var j=0;j<li.length;j++){
    li[j].flag = arr[j];    //给每个li起一个属性，并让属性值为数组中的某个颜色；
    li[j].onmouseover = function(){
        this.style.background = this.flag;   //让这个颜色为这个属性值；
    }
}

小方块需要点击两下：

for(var i=0;i<odiv.length;i++){
    odiv[i].flag = true; //给每个div加一个新的属性；
    odiv[i].onclick = function(){
    if(this.flag){ //如果这个div的这个flag属性为true，则改变；
        this.style.background = "blue";
        this.flag = false; //让这个div的flag属性为false
    }else{
        this.style.background = "red";
        this.flag = true;
        }
    }
}

三、处理异常