Skip to content

js-04 自定义属性

一、获取元素的样式

  1. 标准浏览器中:ie浏览器不支持
js
getComputedStyle(元素).样式;

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

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

  1. ie8以下浏览器获取样式的方法:

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

二、自定义属性

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

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

  1. 自定义索引值:

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

定义:div.name= value

获取:div.name

更改:div.name = new

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

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

自定义属性解决的问题:

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

解决办法:

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

小方块需要点击两下:

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

三、处理异常

Released under the MIT License.