Можно ли в js проверить чему равен style display в css?

Question

[Евгений]

Можно ли задать условие ?
if (элемент скрыт) {
...
}

Попробовал вот так и не работает:

#test1 {
  display:none;
}

var obj1 = document.getElementById('test1');
if (obj1.style.display == 'none') {
document.getElementById('rezult1').innerHTML = "Скрыто";
}

<div id="rezult1">&nbsp;</div>

https://jsfiddle.net/0at4myv8/

Answer 1

[Ankhena]

Из CSS получает getComputedStyle

var obj1 = document.getElementById('test1');

if (getComputedStyle(obj1).display == 'none') {
document.getElementById('rezult1').innerHTML = "Скрыто";
}

Держите https://jsfiddle.net/bh0pvcw5/

Comments

[Евгений]

Спасибо!

Answer 2

[Владислав Лысков]

можем, но не из css-файла, см.

Answer 3

[Stimulate]

https://jsfiddle.net/q186bzcn/

Comments

[Евгений]

тоже как вариант, спасибо )

Answer 4

[Brendan Castaneda]

Оставлю это здесь может кому-то пригодится.
Получить значение css свойства transform. Оно будет выдавать значения 3D-матрицы.
И вам нужен будет определённый номер для получения значения.

Одно из 16 значений однородной матрицы 4x4. Например, m12 представляет значение в первой строке и втором столбце.
Находим значение в матрице для css свойства "transform: scaleY(0);" изменив 0 в css на 44 например.
(мем: нет ты - нет ты lol. Поймёте если не поставите другое значение в css)

let box = document.querySelector('.menu-1');
let getStyle = getComputedStyle(box);
let matrix = new DOMMatrixReadOnly(getStyle.transform);
console.clear();
console.info("gmatrix.m11 = ", matrix.m11);
console.info("gmatrix.m12 = ", matrix.m12);
console.info("gmatrix.m13 = ", matrix.m13);
console.info("gmatrix.m14 = ", matrix.m14);
console.info("gmatrix.m21 = ", matrix.m21);
console.info("gmatrix.m22 = ", matrix.m22);
console.info("gmatrix.m23 = ", matrix.m23);
console.info("gmatrix.m24 = ", matrix.m24);
console.info("gmatrix.m31 = ", matrix.m31);
console.info("gmatrix.m32 = ", matrix.m32);
console.info("gmatrix.m33 = ", matrix.m33);
console.info("gmatrix.m34 = ", matrix.m34);
console.info("gmatrix.m41 = ", matrix.m41);
console.info("gmatrix.m42 = ", matrix.m42);
console.info("gmatrix.m43 = ", matrix.m43);
console.info("gmatrix.m44 = ", matrix.m44);

Использование DOMMatrixReadOnly интерфейса вместо WebKitCSSMatrix.
WebKitCSSMatrix является псевдонимом DOMMatrix, который является изменяемой версией DOMMatrixReadOnly, наследующей от него свойства.

Answer 5

[Преподаватель программирования]

Может быть не хватает знака =
if(obj1.style.display === 'none')

проверь так:
alert(obj1.style.display)

Comments

[Евгений]

Так тоже не работает https://jsfiddle.net/0at4myv8/1/
А если нужно не alert а именно вывести что-то по этому условию?

[Преподаватель программирования]

а что у тебя алерт показывает?

[Евгений]

Преподаватель программирования, так ничего (

[Преподаватель программирования]

Так работает:

obj1.style.display = 'none'
alert(obj1.style.display)

[Преподаватель программирования]

и как вариант сделай класс для скрытия:

.скрытый
{display:none;}

if(obj1.className === 'скрытый')

Answer 6

[fallus]

var obj1 = document.getElementById('test1');
console.log( window.getComputedStyle(obj1, null).getPropertyValue("display") );

Comments

[Евгений]

Консоль сказала: (Uncaught TypeError: Cannot read property 'style' of null)

[fallus]

3vgeny90, эта ошибка не в этом коде)

Answer 7

[Lynn «Кофеман»]

https://developer.mozilla.org/ru/docs/Web/API/Wind...