一 、cssStyle 操作
1、css樣式賦值
style 對象
復(fù)合樣式改寫 background-color ------> backgroundColor
cssText
style.float的兼容 cssFloat /styleFloat
(1)如果想通過js來設(shè)置樣式的話,可以使用
cssText
cssText
的寫法相當于我們平時在寫css
行內(nèi)樣式的寫法
(2)如果只需要添加某一條樣式的話
box1.style.backgroundColor = "red";
(3)如果需要同時添加多條屬性排吴,我們可以調(diào)用
cssTex
t這個函數(shù)。
box2.style.cssText = "width: 300px;height: 400px;background-color: red;transition-duration: 2s;";
二懦鼠、 attribute 屬性節(jié)點
1 . 獲茸炅ā: getAttribute
(名稱)
優(yōu)勢1.用.和[]的形式無法操作元素的自定義屬性 getAttribute可以操作元素的自定義屬性
設(shè)置: ele.setAttribute(名稱, 值)
包含: ele.hasAttribute(名稱)
刪除: ele.removeAttribute(名稱)
2 . Attributes
: 只讀 屬性 屬性列表集合
ele.attributes[index] 第index個屬性
ele.attributes.length 屬性總個數(shù)
ele.attributes[0].name 第一個屬性名
ele.attributes[0].value 設(shè)置或返回屬性的值。
三肛冶、 []
的運用
當我們需要使用字符串表示屬性的時候街氢,或者此時屬性會變化的時候
- obj.style.width = 'ok';
- //可改為
- obj.style['width'] = 'ok';
- //亦可
- var str = 'width'淑趾;
- obj.style[str] = 'ok'