用法示例:
代码如下 |
复制代码 |
// 获取规则
var css = getCssRule();
// 获取指定选择符下面的 CSS 属性值
// selector:选择符(小写)
// attribute:查询的 CSS 属性,脚本模式(如:background-color 为 backgroundColor)
function getCssValue(selector, attribute)
{
return (css[selector])?(css[selector][attribute])?css[selector][attribute]:false:false;
}
document.write("统计数据 ");
document.write(css.totalSheet + " 个 CSS 样式块(包括<link />标签和<style></style>样式块) ");
document.write(css.totalRule + " 条规则(FireFox 下分组选择符如:body, form, p {} 算一条, IE 将分开计算) ");
document.write(css.totalSelector + " 个选择符(将分组选择符分开计算) ");
document.write(css.totalProperty + " 条 CSS 属性(如:border:1px solid #eee;)
");
// 传入选择符为小写,属性为脚本模式
document.write("选择符为 'a.test' 的背景颜色(backgroundColor) 为: ");
document.write("语法:getCssValue('a.test', 'backgroundColor'); ");
document.write("结果:" + getCssValue('a.test', 'backgroundColor') + " ");
document.write("IE 直接返回属性值,但 FireFox 返回 RGB 值");
|
IE 和 FireFox 将自动添加一些规则,比如你只定义 border:1px solid #eee; 它们会自动添加 borderTop, borderBottom, borderLeft, borderRight 的值,在返回值上两个浏览器的处理方法也不同,比如颜色,FireFox 会返回 RGB 格式的颜色值,而 IE 则直接返回规则中的属性值,但这些并不影响应用