属性操作

操作属性的方式

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

属性操作之  .（点）：

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

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

属性操作之[]：

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

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

属性操作之 DOM方法：

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

html代码

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

js代码

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

2、设置属性：setAttribute();

html代码

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

js代码

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

设置属性后的html代码

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

3、删除属性：removeAttribute();

html代码

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

js代码

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

删除属性后的html代码

<!--删除属性后的div-->
<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)。