javascript样式表分为:内嵌式样式表;内联式样式表;外联式样式表。
操作元素的style样式属性(内嵌式)
css样式属性和javascript样式属性对比:
Css样式属性 javascript样式属性
background-color style.backgroundColor
color style.color
font style.font
font-family style.fontFamily
当属性名有2个单词以上时就要使用驼峰命名。
如将一个<div />id="div1"的CSS边框属性更改为"1px solid red",背景色改为green:
var oDiv = document.getElementByIdx_x("div1");
oDiv.style.border = "1px solid red";
oDiv.style.backgroundColor = green;
DOM为style提供了几种方法:
1. getPropertyValue(propertyName) -- 返回CSS属性的属性值的字符串值。
2. getPropertyPriority() -- 如果CSS属性规则指定了"!import",则返回字符串 "!import",否则返回空字符串。
3. item(index) -- 返回指定索引的CSS属性名称。
4. removeProperty(propertyName) -- 从CSS定义中删除propertyName。
5. setProperty(propertyName,value,priority) -- 设置CSS属性propertyName为value 以及给定的优先级。
操作外部样式表及style元素中的样式
DOM指定了一个样式表对象,该对象如下属性:
1. disabled -- 指示样式表是否disabled;
2. href -- 外部样式表的URL;
3. media -- 在media属性中指定的可以使用样式表的媒体类型列表;
4. ownerNode -- 指定样式表的DOM节点(<link />或<style />元素);
5. parentStyleSheet -- 如果样式表被包含在CSS@import语句中,本属性指向语句 发现的样式;
6. title -- 通过HTML的title属性指定的样式列表;
7. type -- 样式表的mime类型。
访问DOM浏览器样式表规则使用cssRules集合;访问IE样式规则使用rules集合。
如判断使用哪个集合名:
var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
操作最终样式(这种只能读)
IE使用currentStyle对象:如显示id为div1的颜色
var oDiv = document.getElementByIdx_x("div1");
alert(oDiv.currentStyle.color);
DOM使用getComputedStyle(要获取样式表的元素,伪元素):如显示id为div1的颜色
var oDiv = document.getElementByIdx_x("div1");
alert(document.defaultView.getComputedStyle(oDiv,null).color);