在 JavaScript 中访问 HTML 元素样式值
人们可能会遇到需要从已在 JavaScript 中定义的 HTML 元素中检索样式的情况。 CSS 样式表。例如，考虑以下 HTML 和 CSS 代码：
<style>
#box { width: 100px; }
</style>
<body>
<div>仅使用纯 JavaScript 而不使用任何库，如何检索 width 属性的值？以下尝试通常会导致接收空白值：
alert(document.getElementById("box").style.width);
alert(document.getElementById("box").style.getPropertyValue("width"));这些尝试会失败，因为它们仅适用于元素 style 属性中定义的内联样式。要检索计算样式，需要采用不同的方法。
跨浏览器兼容性
由于浏览器之间的差异，访问计算样式提出了挑战。 Internet Explorer 使用 element.currentStyle 属性，而其他浏览器则遵循 DOM Level 2 标准，使用 document.defaultView.getCompulatedStyle。此外，IE 使用驼峰式命名法（例如“maxHeight”）以不同方式处理具有两个或多个单词的属性名称。其他浏览器希望用破折号来分隔单词（例如“max-height”）。
跨浏览器函数
为了解决这些跨浏览器差异，以下函数可以使用：
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
if (defaultView && defaultView.getComputedStyle) {
styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) {
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
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;
}
}此函数提供跨浏览器兼容性，用于访问计算样式、处理标准行为和 IE 特定行为。请注意，它可能无法处理所有情况，例如颜色，不同浏览器返回的颜色不同。
以上是如何使用纯 JavaScript 检索 HTML 元素的 CSS 样式值？的详细内容。更多信息请关注PHP中文网其他相关文章！
