Получить фактическое свойство CSS элемента, если он динамически добавлен «! Important»

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()

, но я хочу взять фактическую высоту элемента, который определен в его идентификаторе, но я получаю .maximize в результате не высоту или ширину, которая находится в #somID.

У любого приятеля есть идеи? Это как получить высоту div # somID, если она содержит .maximize ??

Answer 1

Проблема в том, что много, много селекторов, которые применяются к данному элементу, с разными особенностями. Нет 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

Это в основном создает элемент с тем же идентификатором, присоединяет его к телу, считывает размеры и удаляет его немедленно. Это необходимо, потому что div не будет иметь размер, если он просто сохранен как document fragment и не добавлен в DOM, потому что CSS не будет применяться.

В теории вы можете расширить эту функцию, чтобы она работала с другими селекторами.

Однако помните, что это неприятный хак, и вы должны пересмотреть свой подход.

Answer 2

A. Сделайте ваши измерения и сохранять их как .data атрибуты элемента:

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

B. Добавить класс, который изменяет размеры элемента:

$el.addClass('maximise'); 

C. Retrive оригинал размеры, когда это необходимо

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