JavaScript标签内属性和数组

一、操作style属性

1. 通过点语法获取到的style是CSSStyleDeclaration对象，可以直接使用.的形式进行赋值或者访问标签合法属性。

<div id="box" style="width: 100px;height: 100px;background-color: red; float: left;"></div>
<script>
    var oBox = document.getElementById("box");
    oBox.style = "border:5px solid yellow;";
<script/>

2. 通过style.cssText获取完整的行内样式css文本，用于一次性修改多条属性。为了兼容IE低版本，将style.cssText放到后面，因为style.cssText在IE8以下低版本获取到的字符串末尾没有分号，所以会发生拼接错误。

oBox.style.cssText  = "border:5px solid yellow;"+ oBox.style.cssText;

3. 通过style.width等手段，获取具体的样式值，注意此时获取的是字符串，如果类似background-color、webkitTransform，则去掉连接符，且使用驼峰命名法。

console.log(oBox.style.width);
console.log(oBox.style.backgroundColor);

4. 设置style具体属性，通过点语法直接赋值，oBox.style.height = "200px";此时被赋值的是字符串。
5. float，现代浏览器都支持ele.style.float = "left"，但是在低版本IE678下，使用styleFloat，在高版本IE和其他浏览器，使用cssFloat。

oBox.style.styleFloat = "right";
oBox.style.cssFloat = "right";

二、对象的自定义属性

1. 对于元素而言，document.getElementById()获取的其实也是一个对象，该元素的数据类型是object，其实在js中，一切的html元素都可以看做为对象。

var oBox = document.getElementById("box");
alert(oBox);

2. oBox.name = "zhangsan"并不能在审查元素中看到标签该自定义属性，而是创建了一个对象属性。对于一个空对象，也可以随意添加一些属性。

var obj = {};
obj.name = "lisi";
obj.age = 20;
console.log(obj.name);

三、数组

1. 数组可以存储任意的数据类型，最后一个数据的末尾的逗号可加可不加，[1, 2, 3]和[1, 2, 3, ]是一样的。
2. 通过arr.length获取数组的长度，数组的空位也占长度。
3. 通过arr[索引]进行数组取值，数组的长度-1是序号的最大值。
4. 通过arr[索引] = "新值"进行数组的赋值。
5. 通过arr[索引] = "新值"进行数组新增一个值，索引值大于等于数组的长度。
6. 数组空位，例如[, , ]，空位取值为undefined。
7. 通过delete arr[索引]删除数组的元素，留下数组空位。

var arr = [123, 456, function(){}, {}, [1, 2, 3]];
console.log(arr.length);
console.log(arr[0]);
arr[0] = 111;
arr[6] = 456;
console.log(arr[5]);
delete arr[1];
console.log(arr);

四、[]语法

使用[]来代替.语法

var obj = document.getElementById("box");
obj["innerHTML"] = 456;

var a = "innerHTML";
obj[a] = "456";//OK
obj.a = 456;//错误，因为这相当于从属关系