JavaScript与CSS -- 访问样式信息
JavaScript与CSS之间的交互是现代JavaScript编程的支柱之一，运用某型形式的动态交互几乎是所有现代Web应用程序的必备条件。这样可以使页面加载时间更短。JavaScript与CSS之间的交互以及事件的动态绑定方法，它们构成了创建无缝且强大用户体验的基础。访问和设置CSS的属性主要通过元素的样式属性。假设需要获取元素的高度，则可以使用：
element.style.height
设置元素的高度则可以使用：
element.style.height = "100px";
必须注意两点：首先，JavaScript在设置任何几何属性时必须明确单位（例如px单位）；同样任何几何属性的返回值都是字符串而非数值（返回的是"100px"，而不是100）。其次，如果一个元素是100像素高，想获取它的当前高度，并不一定能成功。这是因为使用样式表或者行内样式并不能精确地反映到当前的样式属性中。
而且，由于不同浏览器在获取元素的最终样式上有截然不同的方法，所以需要自定义访问样式信息的函数：
[code lang="js"]
// 获取指定元素（elem）的样式信息（name）
function getStyle( elem, name ) {
// 如果属性存在与 style[] 中，那么它就是已经被设置过了
if (elem.style[name])
return elem.style[name];
// 否则，使用 IE 的方法
else if (elem.currentStyle)
return elem.currentStyle[name];
// 或者 W3C 的方法
else if (document.defaultView && document.defaultView.getComputedStyle) {
// 使用的是通用的 "text-align" 的样式规则而不是 "textAlign"
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
// 获取样式对象并获取属性的值
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
// 否额，用户使用的是其它浏览器
} else
return null;
}
[/code]
一个元素的CSS最终值并不一定等于样式对象值的情形：
[code lang="html"]
p { height: 100px; }
window.onload = function(){
// 定位到段落并检查它的高度
var p = document.getElementsByTagName("p")[0];
// 使用传统的方式来检查
alert( p.style.height + " should be null" );
// 检查高度的值
alert( getStyle( p, "height" ) + " should be 100px" );
};
I should be 100 pixels tall.
[/code]
上面的例子展示了如何获取一个DOM元素的CSS属性的最终真实的值。在这个例子中，得到了元素的真实像素高度，尽管这个高度值是通过文件的头部CSS设置的。需要注意的是，这个函数忽略了像百分比这样的计量单位，所以方法并不十分完美。
查看完整版本： JavaScript与CSS -- 访问样式信息
Tags: