javascript - 如果动态添加 "!important"，则获取元素的实际 CSS 属性

Question

我有一个 id="somID"的元素；

例如:

HTML:

<div id='somID' ></div>

CSS:

#somID{ width:500px;height:500px}

我有一个名为:最大化的类。

所以，

.maximize{width:100% !important; height:100% !important; }

现在我动态地添加了类 .maximize到我的 div #somID

然后我想得到我的 #somID 的宽度和高度通过使用它的 ID 调用，

$('#somID').width() or .height()

但我想获取在其 ID 中定义的元素的实际高度，但我得到了 .maximize结果不是 #somID 中的高度或宽度.

有小伙伴知道吗？如果它包含 .maximize，如何检索 div#somID 的高度??

Answer 1

问题是，可以有很多选择器应用于给定元素，具有不同的特性。没有 API 允许您从 CSS 中的选择器请求属性 - 它根本没有多大意义。

话虽如此，您可以创建一个 hack 来解决该问题:

function getOriginalDimensions(id) {
     var $a = $("<div>", {id:id});
     $("body").append($a);
     var width = $a.width();
     var height = $a.height();
     $a.remove();
     return {width:width, height:height};
}

console.log(getOriginalDimensions("somID")); // returns {width:500, height:500}

以上内容适用于您的示例 HTML 和 CSS。

JSFiddle

这基本上创建了一个具有相同 ID 的元素，将其附加到主体，读取尺寸并立即将其删除。这是必要的，因为如果 div 只是保持为 document fragment，则它没有大小。并且不会添加到 DOM，因为 CSS 不会被应用。

理论上，您可以扩展此函数以使其与其他选择器一起使用。

但是请记住，这是一个讨厌的黑客攻击，您应该重新考虑您的方法。