04-第四章 操作元素属性 CSS样式[ ]的使用

一 、cssStyle 操作

1、css样式赋值

style 对象
复合样式改写 background-color ------> backgroundColor
cssText
style.float的兼容 cssFloat /styleFloat

(1)如果想通过js来设置样式的话，可以使用cssText
cssText的写法相当于我们平时在写css行内样式的写法

(2)如果只需要添加某一条样式的话

box1.style.backgroundColor = "red";

(3)如果需要同时添加多条属性，我们可以调用cssText这个函数。

box2.style.cssText = "width: 300px;height: 400px;background-color: red;transition-duration: 2s;";

二、 attribute 属性节点

1 . 获取： getAttribute(名称)

优势1.用.和[]的形式无法操作元素的自定义属性 getAttribute可以操作元素的自定义属性

设置： ele.setAttribute(名称, 值)
包含： ele.hasAttribute(名称)
删除： ele.removeAttribute(名称)

2 . Attributes : 只读 属性 属性列表集合

ele.attributes[index] 第index个属性
ele.attributes.length 属性总个数
ele.attributes[0].name 第一个属性名
ele.attributes[0].value 设置或返回属性的值。

三、 []的运用

当我们需要使用字符串表示属性的时候，或者此时属性会变化的时候

1. obj.style.width = 'ok';
2. //可改为
3. obj.style['width'] = 'ok'；
4. //亦可
5. var str = 'width'；
6. obj.style[str] = 'ok'