一、操作style属性
- 通过点语法获取到的style是CSSStyleDeclaration对象,可以直接使用
.
的形式进行赋值或者访问标签合法属性。
- 通过
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";//OKobj.a = 456;//错误,因为这相当于从属关系复制代码