如何在 JavaScript 中检索 HTML 元素的样式值
从 HTML 元素检索样式值对于动态操作元素的外观至关重要。虽然使用 JavaScript 设置样式很简单，但访问样式标签中定义的样式可能会很棘手。
跨浏览器注意事项
访问元素样式需要跨浏览器方法。 Internet Explorer 使用自己的属性 currentStyle，而其他浏览器则遵循 W3C 标准，利用 document.defaultView.getCompulatedStyle.
自定义跨浏览器函数
来处理跨浏览器- 浏览器不一致，自定义功能经常出现使用：
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
styleProp = styleProp.replace(/([A-Z])/g, "-").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;
}
}用法
检索元素的样式属性：
var element = document.getElementById("box");
var width = getStyle(element, "width");当前注意事项
上述函数可能无法处理所有边缘情况，特别是对于颜色IE 和其他浏览器的返回值可能会有所不同。
以上是如何获取 HTML 元素在不同浏览器中的样式值？的详细内容。更多信息请关注PHP中文网其他相关文章！
