В соответствии с страницей этого вопроса и принятым ответом здесь правильный способ получения унаследованных значений CSS с помощью Javascript - getComputedStyle().Однако это не работает в следующем примере:
<!DOCTYPE html>
<html lang="en">
<body>
<form id="iterateThroughMe">
<div class="notHidden"><input name="myNum" type="number" /></div>
<div><input name="myOtherNum" type="number" /></div>
<input name="myText" type="text" />
<div id="hider" style="display: none;">
<input name="hiddenElement" type="number" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var inputs = $("#iterateThroughMe").find('input');
for(var i = 0; i<inputs.length; i++) {
var displayStyle = window.getComputedStyle(inputs[i], null).display;
console.log(
(($(inputs[i]).is(":hidden"))?"in":"")+
"visible element: ",inputs[i],"has display style",displayStyle);
}
</script>
</body>
</html>
Сохраненные и открытые в браузере, на консоли видно следующее:
visible element: <input name="myNum" type="number"> has display style inline-block
visible element: <input name="myOtherNum" type="number"> has display style inline-block
visible element: <input name="myText" type="text"> has display style inline-block
invisible element: <input name="hiddenElement" type="number"> has display style inline-block
Существует определенный способдоступ к скрытому / видимому состоянию в jQuery, отмечен здесь , который работает в примере выше, но не всегда уместен .Почему getComputedStyle не различает скрытые и не скрытые элементы, производя inline-block во всех четырех строках вместо none в конце вывода?