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

0

У меня есть элемент с id = "somID";

Например:

Html:

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

Css:

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

и у меня есть класс с именем: maximize.

Так,

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

Теперь динамически я добавил класс .maximize в мой div #somID

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

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

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

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

  • 0
    Вы можете сделать это, но это немного грязно. Удалите maximize класса из элемента, проведите измерение, затем повторно примените maximize .
  • 0
    Если я это сделаю, то мой экран будет мигать на некоторое время .. там нет другого варианта?
Показать ещё 4 комментария
Теги:

2 ответа

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 не будет иметь размер, если он просто хранится как фрагмент документа и не добавляется в DOM, потому что CSS не будет применяться.

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

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

Поделиться
  • 0
    Это работает, но возвращает только правильную высоту, и когда я вызываю его для ширины, он возвращает только ширину моего экрана, а не ту, которую я определяю в somID.
  • 0
    Нет, он возвращает ширину, которую вы определили в somID , по крайней мере, согласно моим тестам в Chrome.
Показать ещё 4 комментария
1

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

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

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

    $el.addClass('maximise');

C. Верните исходные размеры, когда они понадобятся

var h = $el.data('original_dims').height;
var w = $el.data('original_dims').width;
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню