操作属性的方式

操作属性的方式有三种，分别是  .（点）、[]、DOM方法。

属性操作之  .（点）：

可以理解成我们平时说的“的”意思一样。比如谁谁谁的衣服，谁谁谁的钱包等等。

1 var box=document.getElementById(‘div‘);
2 //元素的样式的背景色=红色
3 box.style.background=‘red‘;

属性操作之[]：

中括号里面可以放变量也可以放字符串，它的好处是里面的属性名字是可以变的，当要修改的属性不固定的时候可以用这种方式。

1 var box=document.getElementById(‘div‘);
2 //此例跟上面效果一样
3 box[‘style‘][‘background‘]=‘red‘;
4 //它也可以这样写
5 var s=‘style‘;
6 var b=‘background‘;
7 //如果是参数或者是变量，就不用加引号。有些东西是不可变的，这个时候需要加引号，如‘width‘、‘height‘等等，如果不加引号的话，js会默认的把它们当成没有定义的变量。
8 box[s][b]=‘red‘;

属性操作之 DOM方法：

1、获取属性值：getAttribute();

html代码

1 <div id="div1"></div>

js代码

1 var div=document.getElementById("div1");
2 //语法：元素.getAttribute(属性名);
3 console.log(div.getAttribute(‘id‘)); //div1
4 //无论是获取、设置还是修改属性名的时候都是需要加引号的，不加的话js会把属性名当作一个变量看待，而这个变量既没有声明也没有赋值，所以会报错。

2、设置属性：setAttribute();

html代码

1 <!--原div-->
2 <div id="div1"></div>

js代码

1 var div=document.getElementById(‘div1‘);
2 //语法：元素.setAttribute(属性名,属性值)
3 div.setAttribute(‘index‘,‘i‘);
4 //可以设置自定义属性，也可以设置标签自带的属性。

设置属性后的html代码

1 <!--设置属性后的div-->
2 <div id="div1" index="i"></div>

3、删除属性：removeAttribute();

html代码

1 <!--原div-->
2 <div id="div1"></div>

js代码

1 var div=document.getElementById("div1");
2 //语法：元素.removeAttribute(属性名);
3 div.removeAttribute(‘id‘);

删除属性后的html代码

1 <!--删除属性后的div-->
2 <div></div>

属性操作需要注意的地方

1、style操作的永远都是行间样式。

2、样式优先级 * < 标签 < class < id < 行间 < js，js操作属性的优先级最高。例如让一个div变色，先用style给它变绿，再用className加一个class变红，后者是不会起作用的，因为优先级的原因。

3、href、src、颜色值不要拿来做判断。因为href和src取到的都是绝对地址，而颜色值假如你设置的是background:#000，只有IE9以下能识别，其他标准浏览器或者IE9以上获取的都是rgb(0,0,0)。