Question

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

例如：

HTML：

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

Css：

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

我有一个名为：maximize。

的类

所以，

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

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

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

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

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

任何好友有什么想法？如果它包含.maximize ??

，则如何检索div＃somID的高度

Answer 1

一个。进行测量并将其保存为元素的.data属性：

var $el = $('#somID');
$el.data('original_dims', {
    height: $el.height(),
    width: $el.width()
}

B中。添加更改元素尺寸的类：

    $el.addClass('maximise');

℃。无论何时需要，都要回收原始尺寸

var h = $el.data('original_dims').height;
var w = $el.data('original_dims').width;

Answer 2

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

话虽如此，你可以创建一个黑客来解决这个问题：

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中，则div将没有大小，因为CSS不会被应用。

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

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

获取元素的实际CSS属性，如果它动态添加“！important”

2 个答案: