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

我有一个id =“ somID”的元素；

例如：

HTML：

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

CSS：

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

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

所以，

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

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

之后，我想通过调用其ID来获得#somID的宽度和高度，

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

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

有哥们有什么主意吗？那如何检索div＃somID的高度（如果它包含.maximize）？

最佳答案

问题是，可能有许多不同的选择器应用于给定元素。没有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不会被应用。

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

但是请记住，这是一个讨厌的技巧，您应该重新考虑您的方法。