以下文字非本人原创，只是忘记了来源，如果侵犯了您的权利，请及时和我联系。
JavaScript和CSS的交互是现代JavaScript程序设计的支柱。事实上对于所有的现代web应用程序来说，至少使用某些形式的动态交互 是必须的。那么做过之后，用户可以更快地操作而更少地把时间浪费在等待页面加载上。将动态技术与第六章提出的事件方面的观念相结合，对于实现无缝而强大的 用户体验是非常重要的。
层叠式样式表是用来对易用的、有吸引力的网页进行修饰和布局的事实标准，它在给用户提供最少的困难的同时为开发者提供最多的能力。当你将那一能力与JavaScript相结合时，你将能够构造强健的用户界面，包括动画、窗口部件(widgets)，或动态显示等。
访问样式信息
JavaScript与CSS的结合全部是以表现作为结果的交互。理解什么对你是可用的，对于精确地达到你想要的交互非常重要。
用来设置和获取元素的CSS属性的主要工具是其style属性。比如说，如果想要取得一个元素的高度，你可以编写如下代码： elem.style.height。如果你想要设置元素的高度为某个特定值，你可以执行如下代码：ele.style.height="100px"。
当处理DOM元素的CSS属性时，有两个会碰到的问题，它们并不像一般人所期望的那样运作。首先，JavaScript要求你在设置任何空间尺度时指 明单位(就像前面设置高度时所做的那样)。同时，任何空间属性也将返回一个代表元素属性的字符串而非数字(如"100px"而非100)。第二，如果一个 元素高为100像素，而你试图获取它的当前高度，你期望从style属性里取得那个"100px"，情况却未必会如你所愿。这是因为任何样式表文件或内联 CSS预设的样式信息并不能可靠地反映到style属性上。
这一状况将我们引向JavaScript中处理CSS的一个重要函数：获取一个元素真正的当前样式属性的方法，给你一个预期的精确值。存在一组(来源 于W3C和IE特有的变种)相当可靠的方法可以用来得到DOM元素的真正的计算后的样式属性。它们能顾及所有相关的样式表、元素特定属性以及 JavaScript所作的修改。当需要得到你正操作的元素的精确视图信息时这些方法将会是极其有用的。
获取元素的计算后样式值时应该考虑到存在于不同的浏览器间的大量的差异。跟在大多数的情形一样，IE有它自己的方法，而其它所有的浏览器都使用W3C定义的方式来实现。
程序7-1给出了一个用来找出元素的计算后样式属性值的一个函数，7-2则给出了使用此函数的一个示例。
程序7-1. 用来得到元素的计算后的实际CSS样式值的一个函数
程序7-2. 元素的计算后的CSS样式值未必是style对象里可用值的一种情况
CODE:
程序7-2说明了怎样得到一个DOM元素的实际的CSS属性值。在这种情形里你得到的是元素的实际的像素高度，即使其高度是通过头部的CSS来设定的。 应该注意的是，你的函数将会忽略度量的单位(比如使用的是百分比)。尽管这一解决方案并不是绝对安全的，它的确是一个良好的出发点。
JavaScript和CSS的交互是现代JavaScript程序设计的支柱。事实上对于所有的现代web应用程序来说，至少使用某些形式的动态交互 是必须的。那么做过之后，用户可以更快地操作而更少地把时间浪费在等待页面加载上。将动态技术与第六章提出的事件方面的观念相结合，对于实现无缝而强大的 用户体验是非常重要的。
层叠式样式表是用来对易用的、有吸引力的网页进行修饰和布局的事实标准，它在给用户提供最少的困难的同时为开发者提供最多的能力。当你将那一能力与JavaScript相结合时，你将能够构造强健的用户界面，包括动画、窗口部件(widgets)，或动态显示等。
访问样式信息
JavaScript与CSS的结合全部是以表现作为结果的交互。理解什么对你是可用的，对于精确地达到你想要的交互非常重要。
用来设置和获取元素的CSS属性的主要工具是其style属性。比如说，如果想要取得一个元素的高度，你可以编写如下代码： elem.style.height。如果你想要设置元素的高度为某个特定值，你可以执行如下代码：ele.style.height="100px"。
当处理DOM元素的CSS属性时，有两个会碰到的问题，它们并不像一般人所期望的那样运作。首先，JavaScript要求你在设置任何空间尺度时指 明单位(就像前面设置高度时所做的那样)。同时，任何空间属性也将返回一个代表元素属性的字符串而非数字(如"100px"而非100)。第二，如果一个 元素高为100像素，而你试图获取它的当前高度，你期望从style属性里取得那个"100px"，情况却未必会如你所愿。这是因为任何样式表文件或内联 CSS预设的样式信息并不能可靠地反映到style属性上。
这一状况将我们引向JavaScript中处理CSS的一个重要函数：获取一个元素真正的当前样式属性的方法，给你一个预期的精确值。存在一组(来源 于W3C和IE特有的变种)相当可靠的方法可以用来得到DOM元素的真正的计算后的样式属性。它们能顾及所有相关的样式表、元素特定属性以及 JavaScript所作的修改。当需要得到你正操作的元素的精确视图信息时这些方法将会是极其有用的。
获取元素的计算后样式值时应该考虑到存在于不同的浏览器间的大量的差异。跟在大多数的情形一样，IE有它自己的方法，而其它所有的浏览器都使用W3C定义的方式来实现。
程序7-1给出了一个用来找出元素的计算后样式属性值的一个函数，7-2则给出了使用此函数的一个示例。
程序7-1. 用来得到元素的计算后的实际CSS样式值的一个函数
//获取一个特定元素(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();
//获取style对象并取得属性的值(如果存在的话)
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
//否则，就是在使用其它的浏览器
} else
return null;
}
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();
//获取style对象并取得属性的值(如果存在的话)
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
//否则，就是在使用其它的浏览器
} else
return null;
}
程序7-2. 元素的计算后的CSS样式值未必是style对象里可用值的一种情况
CODE:
<html>
<head>
<style>p { height: 100px; }</style>
<script>
window.onload = function(){
//找到欲检查高度的段落对象
var p = document.getElementsByTagName("p")[0];
//使用传统方式检查其高度
alert( p.style.height + " should be null" );
//检查计算后的高度值
alert( getStyle( p, "height" ) + " should be 100px" );
};
</script>
</head>
<body>
<p>I should be 100 pixels tall.</p>
</body>
</html>
<head>
<style>p { height: 100px; }</style>
<script>
window.onload = function(){
//找到欲检查高度的段落对象
var p = document.getElementsByTagName("p")[0];
//使用传统方式检查其高度
alert( p.style.height + " should be null" );
//检查计算后的高度值
alert( getStyle( p, "height" ) + " should be 100px" );
};
</script>
</head>
<body>
<p>I should be 100 pixels tall.</p>
</body>
</html>
程序7-2说明了怎样得到一个DOM元素的实际的CSS属性值。在这种情形里你得到的是元素的实际的像素高度，即使其高度是通过头部的CSS来设定的。 应该注意的是，你的函数将会忽略度量的单位(比如使用的是百分比)。尽管这一解决方案并不是绝对安全的，它的确是一个良好的出发点。
浙公网安备 33010602011771号