我如何访问使用外部或嵌入式样式表指定的元素的样式声明.例如:如何使用id选择器访问在嵌入式样式表中定义的元素的width属性.
我知道CSSRules对象可以做到这一点…但是它取决于浏览器.对于ex:在chrome中,该对象为null …那么浏览器无关的方法是什么?
解决方法:
这实际上取决于浏览器…我有一些代码用来制作自动扩展文本区域,改编自发现的代码there.
注意,这里的$函数来自Prototype.
function getStyleFromCss(el, style) {
/* Hack required by IE */
var value = $(el).getStyle(style);
if (!value) {
/* For other browsers. Actually this equals 'window'. Use that
* if Opera fails on you. */
if(document.defaultView) {
value = document.defaultView.getComputedStyle(el, null).
getPropertyValue(style);
// for IE
} else if(el.currentStyle) {
value = el.currentStyle[style];
}
}
if(value.length > 0){
/* if the value returned has the word px in it, we check for
* the letter x */
if (value.charAt(value.length-1) == "x") {
value = parseInt(value.substring(0, value.length-2));
}
}
return value;
}
Prototype的getStyle()函数是通过这种方式定义的,您应该能够轻松地使其适应您的需求.
getStyle: function(element, style) {
element = $(element);
style = style == 'float' ? 'cssFloat' : style.camelize();
var value = element.style[style];
if (!value || value == 'auto') {
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css[style] : null;
}
if (style == 'opacity') return value ? parseFloat(value) : 1.0;
return value == 'auto' ? null : value;
},