function switchVisibility(id){
     if(document.getElementById(id).style.visibility === "visible"){
         document.getElementById(id).style.visibility = "hidden";
     } else {
         document.getElementById(id).style.visibility = "visible";
     }
}

Я пытаюсь создать функцию Javascript, которая проверяет, является ли атрибут CSS истинным или ложным. В зависимости от состояния атрибута он будет изменен. Но это не работает, и я не нахожу своей ошибки.

Pharagon

Ответов: 3

Ответы (3)

Я использую Chrome. Я проверил вашу функцию, она работает, кроме первого раза. Насколько я понимаю, проблема в вашем if. Вы проверяете, является ли атрибут visible элемента «видимым». Однако по умолчанию большинство программистов не указывают этот атрибут, потому что браузеры по умолчанию делают элементы видимыми. Итак, для этого конкретного атрибута, например, вы должны проверить, пуст ли он:

if (document.getElementById (id) .style.visibility === "visible" || document.getElementById (id) .style.visibility === "").

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

Надеюсь, что это решит вашу проблему. :)

Вы можете использовать функцию getComputedStyle.

Вот как вы можете использовать это в своем примере:

function switchVisibility(id){
    var element = document.getElementById(id);
    var cStyle = getComputedStyle(element);
    var visibility = cStyle.getPropertyValue("visibility");  
    element.style.visibility = visibility === "visible" ? "hidden" : "visible";
}  

Причина, по которой простая проверка свойства в element.style не работает, заключается в том, что .style учитывает только свойства CSS, прикрепленные к элементу Атрибутstyle, за исключением стилей, которые он получает по умолчанию и через теги