我正在寻找一种从样式标签中设置了样式的元素中检索样式的方法。
<style>
#box {width: 100px;}
</style>
在身体里
<div id="box"></div>
我正在寻找不使用库的直接javascript。
我尝试了以下操作,但始终收到空白:
alert (document.getElementById("box").style.width);
alert (document.getElementById("box").style.getPropertyValue("width"));
我注意到,如果我已使用javascript设置了样式,但无法使用样式标签,则只能使用以上内容。
该element.style
属性仅让您知道在该元素中定义为内联的CSS属性(以编程方式或在元素的style属性中定义),则应获取计算出的style。
以跨浏览器的方式进行操作并非易事,IE通过该element.currentStyle
属性具有自己的方式,而其他浏览器通过该方法实现的DOM Level 2 标准方式document.defaultView.getComputedStyle
。
这两种方法有差异,例如,在IE element.currentStyle
属性期待您访问的两个或多个单词组成的CCS属性名驼峰(例如maxHeight
,fontSize
,backgroundColor
等),标准的方式希望与字词的属性与破折号分开(例如max-height
,font-size
,background-color
,等等)。
同样,IE element.currentStyle
将以指定的单位返回所有尺寸(例如12pt,50%,5em),标准方式将始终以像素为单位计算实际尺寸。
我前段时间做了一个跨浏览器功能,该功能允许您以跨浏览器的方式获取计算的样式:
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hypen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
上面的函数在某些情况下并不完美,例如对于颜色,标准方法将以rgb(...)表示法返回颜色,在IE上,它们将按定义返回它们。
我目前正在撰写有关该主题的文章,您可以在此处跟随我对此功能所做的更改。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句