Question

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属性是true还是false。根据属性的状态，它将被更改。但它不起作用，我没有发现我的错误。

Answer 1

您可以使用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仅考虑附加到元素的style属性的CSS属性，不包括它所获得的样式默认并通过<style>标记。

Answer 2

我正在使用Chrome。我检查了你的功能，它的工作原理，除了它第一次执行。据我所知，问题出在if。检查元素的visible属性是否“可见”。但是，默认情况下，大多数程序员都不指定此属性，因为默认情况下浏览器会使元素可见。因此，对于此特定属性，您应该检查它是否为空：

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

此外，为了使您的代码更清晰，我认为您最好将“获取元素”提取到变量中。

希望能解决您的问题。：）

Answer 3

使用jQuery或zepto等框架可以使用hasClass。那看起来像是：

if ($('#your-id').hasClass('visible')){
    // your code for when it's visible
}
else { 
    // your code for when it's hidden
}

在幕后，jQuery将其写为

hasClass: function( selector ) {
    var className, elem,
        i = 0;

    className = " " + selector + " ";
    while ( ( elem = this[ i++ ] ) ) {
        if ( elem.nodeType === 1 &&
            ( " " + getClass( elem ) + " " ).replace( rclass, " " )
                .indexOf( className ) > -1
        ) {
            return true;
        }
    }

    return false;
}

这就是为什么存在jQuery和zepto之类的东西 - 让你有更多的时间考虑你的应用程序，而不是如何编写已经编写的东西。

如何比较CSS属性

3 个答案: