Question

我试图通过在display：none和display：block之间切换来调整w3schools.com的功能以切换div的可见性。

所述div的显示属性是通过css定义的。如果显示最初设置为＆＃39;阻止＆＃39;，一切正常，但如果它最初设置为“无”，则不会。

＆＃13;

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

＆＃13;

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display : block;
}

＆＃13;

<p>Click the button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Click</button>

<div id="myDIV">
  This is my DIV element.
</div>

＆＃13;

请参阅此codepen example。如果你将css更改为display：none;你需要在div切换到阻止之前单击按钮两次（！）。为什么脚本无法识别最初的＆＃39;无＆＃39;？

Answer 1

问题是您最初是通过对象的display属性获取style属性值。但是，该属性只返回＆＃34;内联＆＃34;应用于元素的样式，如下所示：

<div style="display:none;">something</div>

由于您是通过单独的＆＃34;内部风格设置display:none＆＃34;而不是内联样式，从x.style.display返回的初始值是一个空字符串，因此您的代码执行将落入else语句的if分支，然后新的内联样式为元素设置。这就是为什么它适用于第二次点击 - 第一次点击实际上创建了一个之前不存在的内联样式，因此第二次点击有效。

您应该使用 window.getComputedStyle(x).display; 来获取值，因为.getComputedStyle()获取属性值，无论其在元素上的位置或方式如何。

＆＃13;

function myFunction() {
    var x = document.getElementById("myDIV");
    var displayValue = window.getComputedStyle(x).display;
    if (displayValue === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

＆＃13;

#myDIV {
    display:none;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

＆＃13;

<p>Click the button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Click</button>

<div id="myDIV">
  This is my DIV element.
</div>

＆＃13;

说到这一点，使用内联样式通常被认为是最后的手段，因为代码必须具有多么精细，它们如何导致代码重复，代码变得不可扩展以及覆盖内联有多困难样式。提前设置CSS类然后根据需要将这些类应用或删除到元素要简单得多。 DOM元素支持 .classList 属性，该属性提供了添加，删除和切换类的简便方法（切换是您想要的）。 这种方法使实际的功能代码更加简单：

＆＃13;

function myFunction() {
    document.getElementById("myDIV").classList.toggle("hidden");
}

＆＃13;

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

/* This class will be added, removed or toggled as needed.
   It is kept separate from the element's style so that only
   this property can be toggled as needed without affecting 
   the other styling of the element. Also, it can be used
   for any other elements (as needed) that may need to be 
   hidden at some point. */
.hidden { display:none; }

＆＃13;

<p>Click the button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Click</button>

<!-- Notice that the element has the class applied to it from the start 
     to ensure that the element is hidden from the start.                -->
<div id="myDIV" class="hidden">This is my DIV element.</div>

＆＃13;

Answer 2

元素就像JavaScript中的大多数东西一样，具有属性。其中一个是style。通过样式表设置的样式不会设置为内联样式。因此，当您最初通过样式表设置display: none时，x.style.display将返回undefined，因为没有在元素本身上设置样式属性。通常的做法是避免设置内联样式。

使用classlist尝试另一种方法。

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.classList.contains("hide")) //check if element has hide as classname
    {
       x.classList.remove("hide");
    } else {
        x.classList.add("hide");
    }
}

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display : block;
}

#myDIV.hide{
  display: none;
}

<p>Click the button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Click</button>

<div id="myDIV" class="hide">
  This is my DIV element.
</div>

Answer 3

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "") {
        x.style.display = "block";
    } else {
        x.style.display = "";
    }
}

#myDIV {
    display: none;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

<p>Click the button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Click</button>

<div id="myDIV">
  This is my DIV element.
</div>

Answer 4

请注意，CSS文件中display: none与设置x.style.display = "none"的方式不同。在一种情况下，您正在影响CSS规则，在其他情况下，您正在更改元素的内联样式。因此，即使您在CSS中设置display: "none"，x.style.display也会在您第一次检查时未定义：

if (x.style.display === "none") {  <<< jumps to the else!

有多种选择，但您可以检查计算出的样式：

let display = getComputedStyle(x).getPropertyValue("display");
if (display === "none") {

我希望它有所帮助！

Answer 5

如果您的用户使用相对较新的浏览器，您可以使用classList API大大缩短您的代码，而在不支持它的浏览器中，您只需对其进行填充即可。

<强> JavaScript的：

function myFunction() {
    var el = document.querySelector("#myDiv");

    el.classList.toggle("show");
};

<强> CSS：

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display : none;
}

#myDIV.show{
  display: block;
}

CSS显示错误：无法识别

5 个答案: