Получить значение CSS элемента с помощью Javascript

Question

Я пытаюсь найти способ получить свойство высоты CSS элемента или просто указать, установлено ли свойство высоты.

Проблема заключается в том, когда я использую

 
$(elem).css('height'); 

я получить высоту отображения элемента, но я стараюсь, чтобы увидеть, если элемент имеет свойство высоты, которая была установлена ​​в любом классе, идентификатор , или непосредственно на div.

Любые предложения?

Answer 1

Вы также можете использовать height.

$(elem).height(); // to get the height. 

Also see this Q/A

, если вы хотите, чтобы получить правильное значение CSS, я могу посоветовать не использовать JQuery

если мы имеем HTML:

<div id="elem" style="height: auto"></div> 

мы можем написать JS:

$('#elem').get(0).style.height // "auto" 

, если у нас есть HTML:

<div id="elem"></div> 

JS:

$('#elem').get(0).style.height // "" 

универсальная функция:

var height = function(elem){ 
     return $(elem).get(0).style.height === "" ? $(elem).height() : $(elem).get(0).style.height; 
} 

Answer 2

Вероятно, не самый лучший способ, но я бы просто посмотреть на outerHTML см, если высота значение установлено. Если это не так, то это в CSS (или ничего не задано).

s = $(elem)[0].outerHTML; 
if (s.indexOf("height:") > 0) { 
    // inline style 
} else { 
    // somewhere else 
} 

Answer 3

$("div").click(function() { 

you can check if height is defined for this div parent element or children using *this* reference. For now i am just fetching the height of the div which has been clicked. 
    var height= $(this).css("height"); 
    //If height is truthy 
    if(height){ 
    //your code here 
    } 
    }); 

Надеется, что это ответ на ваш запрос. For more details..

Answer 4

Проблема заключается в том, что вы подразумеваете под «установлено»?

В ваниль Javascript вы можете сделать:

element.style.height 

Это будет возвращать пустую строку, если высота не была установлена ​​INLINE.

Однако, если высота была применена через таблицу стилей, она все равно вернет пустую строку.

Проблема заключается в том, что если вы вернули вычисленную высоту либо в .height() в jQuery, либо в window.getComputedStyle(element).height в Javascript, то нет способа сказать, была ли она рассчитана путем применения таблицы стилей (что вы бы назвали «имеющей свойство высоты set '), или был создан путем расширения высоты элемента до его содержимого (которое вы назвали бы «не имеющим набор свойств высоты»).

--------------------- Обновление ----------------------

Чтобы сделать его более ясным, я пытаюсь определить, является ли высота div заданной высотой или высотой, определенной в css.

Разница может содержать высоту своих детей, или она может иметь высоту, определенную непосредственно на div. Высоты для детей или рассматриваемого div могут быть заданы в файле CSS, теге стиля на странице или в самом div.

Я пытаюсь увидеть, имеет ли div свойство высоты набора css.

• по pedalpete

--------------------- Update -------------- --------

Я понял ваш вопрос, но, возможно, мой ответ был немного непрозрачным.

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

Единственное, что вы можете узнать (через element.style) - это если объявлен встроенный стиль.

getComputedStyle расскажет вам, насколько высок элемент в настоящее время, но он не скажет вам, как это получилось.

• Грэма Nicol

Answer 5

Похоже, там не простой способ сделать это, мой метод, чтобы решить эту проблему, чтобы скрыть детей в DIV, а и проверить, если высота из div изменился. Если это так, высота не была установлена, если она не была установлена.

Это не удается, когда div имеет только текст, но поскольку это тег макета, он, скорее всего, всегда будет иметь подтеки.

 
var elHeight = $(elem).height(); 
$(elem).children().hide(); 
var checkHeight = elHeight===$(elem).height(); 
$(elem).children().show(); 
console.log(checkHeight); 
if(checkHeight===false) return setSize($(elem).parent().height()/2);