显示的 CSS 问题：没有不被识别答案

【问题标题】：CSS trouble with display:none not being recognized显示的 CSS 问题：没有不被识别
【发布时间】：2018-04-02 17:54:32
【问题描述】：

我正在尝试调整 w3schools.com 的功能，通过在 display:none 和 display:block 之间切换来切换 div 的可见性。

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

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

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

<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>

请看这个codepen example。如果您将 css 更改为显示：无；您需要在 div 切换为阻止之前单击按钮两次（！）。为什么脚本无法识别初始的“无”？

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

由于您通过单独的“内部样式”而不是内联样式设置display:none，因此从x.style.display 返回的初始值是一个空字符串，因此您的代码执行落入您的else 分支if 声明，然后为元素设置新的内联样式。这就是它在第二次点击时起作用的原因 - 第一次点击实际上创建了一个以前不存在的内联样式，因此第二次点击起作用。

您应该使用 window.getComputedStyle(x).display; 来获取值，因为 .getComputedStyle() 获取一个属性值，而不管它在元素上的位置或方式设置。

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";
    }
}

#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>

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

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

#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; }

<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>

【讨论】：

嗨，斯科特，感谢您的出色回答！这是最有帮助和教育的！

【解决方案2】：

如果您的用户使用的是相对较新的浏览器，您可以使用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;
}

【讨论】：

【解决方案3】：

请注意，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") {

希望对你有帮助！

【讨论】：

【解决方案4】：

元素就像 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>

【讨论】：

“但是样式表（内部通过 不，它们没有。只是 DOM 元素属性被转换为 JS 对象属性，所以 style 属性可以通过 style 属性访问，但是，以其他方式应用的样式不会。所有三种设置样式的方法都使用同一个 CSS 引擎。
会改变这个！

【解决方案5】：

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>

【讨论】：