获取初始定义的 CSS 属性值（百分比/EM/PX）
在 Web 开发中，检索原始值至关重要元素的 CSS 属性值，无论任何后续修改如何。当使用百分比或 em 等单位时尤其如此，因为计算值通常提供 px 值。
问题定义
使用 getCompulatedStyle 等函数时会出现问题或者 jQuery 的 css() 来获取当前的 CSS 属性值。这些方法返回以像素为单位的值，即使最初设置为其他单位。
解决方案：getMatchedStyle
要解决此问题，可以使用名为 getMatchedStyle 的自定义 JavaScript 函数受雇。此函数迭代元素的 CSS 规则，确定元素样式和重要规则的优先级。然后，它返回 CSS 规则中定义的初始值。
代码示例
function getMatchedStyle(elem, property) {
// Check for element-defined property (highest priority)
var val = elem.style.getPropertyValue(property);
// If important, return immediately
if (elem.style.getPropertyPriority(property)) return val;
// Get matched CSS rules in descending priority order
var rules = getMatchedCSSRules(elem);
// Iterate through rules backwards to ensure correct priority
for (var i = rules.length; i--;) {
var r = rules[i];
// Check if rule is important
var important = r.style.getPropertyPriority(property);
// Update value only if not set or if important rule encountered
if (val == null || important) {
val = r.style.getPropertyValue(property);
// Return if important rule encountered
if (important) break;
}
}
return val;
}示例用法
考虑以下 HTML 和 CSS：
<div class="b">first</div> <div>
以下 JavaScript 代码可以用于检索div的初始宽度：
var d = document.querySelectorAll('div');
for (var i = 0; i < d.length; ++i) {
console.log("div " + (i + 1) + ": " + getMatchedStyle(d[i], 'width'));
}输出
div 1: 100px div 2: 50%
通过使用getMatchedStyle函数，我们可以准确检索CSS属性值按照最初的定义，无论它们是否被后续样式修改。
以上是如何获取初始定义的CSS属性值（包括百分比和EM单位）？的详细内容。更多信息请关注PHP中文网其他相关文章！
