一、操作style属性
- 通过点语法获取到的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/>
- 通过
style.cssText获取完整的行内样式css文本，用于一次性修改多条属性。为了兼容IE低版本，将style.cssText放到后面，因为style.cssText在IE8以下低版本获取到的字符串末尾没有分号，所以会发生拼接错误。
oBox.style.cssText = "border:5px solid yellow;"+ oBox.style.cssText;
- 通过
style.width等手段，获取具体的样式值，注意此时获取的是字符串，如果类似background-color、webkitTransform，则去掉连接符，且使用驼峰命名法。
console.log(oBox.style.width);
console.log(oBox.style.backgroundColor);
- 设置style具体属性，通过点语法直接赋值，
oBox.style.height = "200px";此时被赋值的是字符串。 - float，现代浏览器都支持
ele.style.float = "left"，但是在低版本IE678下，使用styleFloat，在高版本IE和其他浏览器，使用cssFloat。
oBox.style.styleFloat = "right";
oBox.style.cssFloat = "right";
二、对象的自定义属性
- 对于元素而言，
document.getElementById()获取的其实也是一个对象，该元素的数据类型是object，其实在js中，一切的html元素都可以看做为对象。
var oBox = document.getElementById("box");
alert(oBox);
-
oBox.name = "zhangsan"并不能在审查元素中看到标签该自定义属性，而是创建了一个对象属性。对于一个空对象，也可以随意添加一些属性。
var obj = {};
obj.name = "lisi";
obj.age = 20;
console.log(obj.name);
三、数组
- 数组可以存储任意的数据类型，最后一个数据的末尾的逗号可加可不加，[1, 2, 3]和[1, 2, 3, ]是一样的。
- 通过arr.length获取数组的长度，数组的空位也占长度。
- 通过arr[索引]进行数组取值，数组的长度-1是序号的最大值。
- 通过arr[索引] = "新值"进行数组的赋值。
- 通过arr[索引] = "新值"进行数组新增一个值，索引值大于等于数组的长度。
- 数组空位，例如[, , ]，空位取值为undefined。
- 通过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;//错误，因为这相当于从属关系
网友评论