Question

在下面的代码中，Javascript没有读取CSS显示元素，我不明白为什么。在输入debugger语句后，我看到显示为空，即使我在CSS中设置它。我已经盯着它看了一会儿，所以我可能会遗漏一些明显的东西。

<html>
<head>
<style type="text/css">
    div#image{ display: none; }
    div#url { display: none; }
</style>
<script type="text/javascript">
    function toggleVisibility(id) {
    debugger;
        var imageStyle = document.getElementById('image').style;
        var urlStyle = document.getElementById('url').style;
        alert(document.getElementById("image").style.display); // debug for stack
        if ( id == "image" ) {
            if ( imageStyle.display == "none" ) {
                imageStyle.display = "block";
                urlStyle.display = "none";
            }
        }

        if ( id == "url" ) {
            if ( urlStyle.display == "none" ) {
                urlStyle.display = "block";
                imageStyle.display = "none";
            }
        }
    }
</script>
</head>
<body>
    <form method="post" action="create.php">
        <input type="hidden" name="formType" value="create">
        <input type="radio" name="type" value="image" onClick="toggleVisibility('image');"> Image <input type="radio" name="type" value="url" onClick="toggleVisibility('url');"> URL
        <div id="image">
            Image div
        </div>
        <div id="url">
            URL div
        </div>
    </form>
</body>
</html>

Answer 1

Demo

您无法读取此类属性的css样式，但另一种方法是检查空值并将其视为display:none

    if ( id == "image" ) {
        if ( imageStyle.display == "none" || !imageStyle.display) {
            imageStyle.display = "block";
            urlStyle.display = "none";
        }
    }

    if ( id == "url" ) {
        if ( urlStyle.display == "none" || !urlStyle.display) {
            urlStyle.display = "block";
            imageStyle.display = "none";
        }
    }

Answer 2

style个实例上的HTMLElement属性仅反映该元素的内联样式的信息（例如，代码上的style属性）。要获取元素的计算样式（包括CSS规则应用的任何元素），您必须使用getComputedStyle（在支持它的浏览器上）或currentStyle（在支持它的浏览器上）。

稍微偏离主题：可靠地获取元素的计算样式是一个（很多）区域，其中一个好的JavaScript库可以为您节省大量时间和麻烦，无论它是{{ 3}}，jQuery，Prototype，YUI或Closure。这不仅仅是getComputedStyle / currentStyle二分法，还有各种浏览器怪癖。使用一个好的库，您可以利用其他人所做的大量工作和研究，这样您就可以专注于您的特定工作。通常。： - ）

例如，使用jQuery，您可以查看具有id“图像”的元素是否可见（可能受display: none，visibility: hidden等影响），如下所示：

if ($("#image").visible()) {
    // Yes it is
}

或者，如果您想检查特定的计算样式：

if ($("#image").css("display") === "none") {
    // It has display: none, either directly or by rule
}

其他库将具有类似的功能。

Answer 3

JavaScript本身不会从样式表中设置的元素中读取样式。我认为JQuery和其他库有。为了实现这一点，您可以在实际标记本身上使用style属性：

<div id="image" style="display:none">
    Image div
</div>
<div id="url" style="display:none">
    URL div
</div>

或者，检查空值并将其用作“无”

Answer 4

那是因为你需要获得元素的计算样式。

您可以使用此功能执行此操作：

function getStyle( elem, name ) {
    var value;

    if (elem.currentStyle) {
        value = elem.currentStyle[name];
    } else if (window.getComputedStyle) {
        value = document.defaultView.getComputedStyle(elem,null).getPropertyValue(name);
    }
    return value;       
}

我也简化了你的部分JS，所以你可能不需要检查元素的样式：

if ( id == "image" ) {
    imageStyle.display = "block";
    urlStyle.display = "none";
}

if ( id == "url" ) {
   urlStyle.display = "block";
   imageStyle.display = "none";
}

演示here

来自Javascript的CSS属性可见性问题

4 个答案:

Demo