取得初始定義的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中文網其他相關文章！
