Могу ли я определить текущее состояние стиля отображения CSS для данного элемента, используя JS

Question

Я хочу написать простую функцию javascript, которая переключает видимость данного элемента. Проблема в том, что сразу после загрузки страницы начальный стиль неизвестен (по крайней мере, мне). Как определить текущее значение элемента стиля отображения данного элемента?

Answer 1

Из исходного кода jQuery / Sizzle:

elem.offsetWidth > 0 || elem.offsetHeight > 0 // visible
elem.offsetWidth === 0 || elem.offsetHeight === 0  // hidden

где elem - элемент DOM.

Теперь я не совсем уверен, почему они говорят, что элемент видим , если или измерение больше нуля. Я бы сказал, что оба измерения должны быть больше нуля, чтобы оно считалось «видимым», но я верю, что они знают лучше. (Возможно, одно нулевое измерение и другое ненулевое измерение даже невозможно в браузере).

Обновление: Есть еще одно обсуждение по теме и альтернативное решение (хотя еще не пробовали): Как проверить, действительно ли элемент виден в JavaScript?

Answer 2

Чисто Javascript, это должно работать.

function getStyle(elementId){
   alert(document.defaultView.getComputedStyle(document.getElementById(elementId), '').getPropertyValue("display"));
}

Answer 3

function getDisplayStyle(elementId){   
 var display = document.getElementById(elementId).style.display;
 alert(display);
}

Answer 4

Измерение смещений будет работать, если вы смотрите только на свойство отображения, но тест для visibility требует изучения каскада стилей (зависящего от браузера)

document.deepCss=function(who, css){
 var val, dv= document.defaultView || window;
 val= who.style[css];
 if(!val){
  if(who.currentStyle) val= who.currentStyle[css];
  else val= dv.getComputedStyle(who,"").getPropertyValue(css);
 }
 return val || "";
}
function isVisible(who){
 return !!(document.deepCss(who,'visibility') != 'hidden' && 
 document.deepCss(who,'display') != 'none');
}

Answer 5

Нет-нет, jquery не нужен.

ЕСЛИ это показ: ни один вы не после. Еще сделать то же самое с видимостью: скрыто.

 if(mynode.style.display != "none")
    { ..  }
    else

Answer 6

$(document).ready( function () {
 if $('#id').hasClass('hidden') 
   $('#id').toggelClass('hidden');
);

скрыто класс CSS для скрытия элемента

Answer 7

с использованием jQuery, при условии, что ваш элемент имеет идентификатор myElement:

if($("#myElement").is(":visible")){
    // yep, it's visible - handle accordingly
}else{
    // nope, not visible
}