2023年2月16日 17:31:20go评论58阅读模式

英文:

Why does toggling visibility works only after second click?

问题

我有一个按钮，应该在visible和hidden之间切换可见性，即使我在CSS中指定div具有visibility: hidden，但JS代码首先将CSS视为空白（就好像我没有指定样式）。

只有在第二次点击（在我这种情况下是mouseup事件）之后，它才会检测到可见性，并开始工作，为什么？

以下是代码片段：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById("div");
  if (div.style.visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}

<!-- language: lang-css -->
#div {
  visibility: hidden;
}

<!-- language: lang-html -->
<button id="button"> toggle </button>
<div id="div">
  <h1> Hello, World! </h1>
</div>

<!-- end snippet -->

英文:

I have a button that should toggle between visibility visible and hidden, and even though I specify in CSS that the div has visibility: hidden, the JS code first sees the CSS as blank (as if I did not specify the style).

Only after the second click (mouseup event in my case), it detects the visibility and the toggling starts working, why?

Here's a snippet:

let button = document.querySelector(&quot;#button&quot;);
button.addEventListener(&quot;mouseup&quot;, toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById(&quot;div&quot;);
  if (div.style.visibility === &quot;hidden&quot;) {
    div.style.visibility = &quot;visible&quot;;
  } else {
    div.style.visibility = &quot;hidden&quot;;
  }
}

#div {
  visibility: hidden;
}

&lt;button id=&quot;button&quot;&gt; toggle &lt;/button&gt;

&lt;div id=&quot;div&quot;&gt;
  &lt;h1&gt; Hello, World! &lt;/h1&gt;
&lt;/div&gt;

答案1

得分: 3

div.style 读取的是 style 属性，而不是实际应用的样式。要解决这个问题，你可以使用内联样式或通过 getComputedStyle() 获取计算后的样式。

内联样式示例：

<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById("div");
  if (div.style.visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}

<!-- language: lang-html -->
<button id="button">toggle </button>
<div id="div" style="visibility: hidden;">
  <h1> Hello, World! </h1>
</div>
<!-- end snippet -->

getComputedStyle() 示例：

<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById("div");
  const style = window.getComputedStyle(div);
  
  if (style.visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}

<!-- language: lang-css -->
#div {
  visibility: hidden;
}

<!-- language: lang-html -->
<button id="button">toggle </button>
<div id="div">
  <h1> Hello, World! </h1>
</div>
<!-- end snippet -->

编辑: 正如评论中指出的，切换类是另一种替代方法。这在需要更改多个样式时特别有用。

<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById("div");
  div.classList.toggle('show');
}

<!-- language: lang-css -->
#div {
  visibility: hidden;
}

#div.show {
  visibility: visible;
}

<!-- language: lang-html -->
<button id="button">toggle </button>
<div id="div">
  <h1> Hello, World! </h1>
</div>
<!-- end snippet -->

英文:

div.style reads from the style attribute not the actual applied styles. To fix this you can either use inline styling or get the computed style via getComputedStyle().

Example inline styling:

let button = document.querySelector(&quot;#button&quot;);
button.addEventListener(&quot;mouseup&quot;, toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById(&quot;div&quot;);
  if (div.style.visibility === &quot;hidden&quot;) {
    div.style.visibility = &quot;visible&quot;;
  } else {
    div.style.visibility = &quot;hidden&quot;;
  }
}

&lt;button id=&quot;button&quot;&gt; toggle &lt;/button&gt;

&lt;div id=&quot;div&quot; style=&quot;visibility: hidden;&quot;&gt;
  &lt;h1&gt; Hello, World! &lt;/h1&gt;
&lt;/div&gt;

Example getComputedStyle():

let button = document.querySelector(&quot;#button&quot;);
button.addEventListener(&quot;mouseup&quot;, toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById(&quot;div&quot;);
  const style = window.getComputedStyle(div);
  
  if (style.visibility === &quot;hidden&quot;) {
    div.style.visibility = &quot;visible&quot;;
  } else {
    div.style.visibility = &quot;hidden&quot;;
  }
}

#div {
  visibility: hidden;
}

&lt;button id=&quot;button&quot;&gt; toggle &lt;/button&gt;

&lt;div id=&quot;div&quot;&gt;
  &lt;h1&gt; Hello, World! &lt;/h1&gt;
&lt;/div&gt;

EDIT: As pointed out in the comments toggling a class is another alternative. This is especially useful if you need to change more then one style.

let button = document.querySelector(&quot;#button&quot;);
button.addEventListener(&quot;mouseup&quot;, toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById(&quot;div&quot;);
  div.classList.toggle(&#39;show&#39;);
}

#div {
  visibility: hidden;
}

#div.show {
  visibility: visible;
}

&lt;button id=&quot;button&quot;&gt; toggle &lt;/button&gt;

&lt;div id=&quot;div&quot;&gt;
  &lt;h1&gt; Hello, World! &lt;/h1&gt;
&lt;/div&gt;

答案2

得分: 1

为了评估元素的样式属性，您需要使用 window.getComputedStyle() 方法。

在您的情况下，代码应如下所示：

<!DOCTYPE html>
<html>
<style>
#div {
  visibility: hidden;
}
</style>
<body>

<button id="button"> toggle </button>

<div id="div">
  <h1> Hello, World! </h1>
</div>

<script>
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById("div");
  
  if(window.getComputedStyle(div).visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}

</script>
</body>
</html>

英文:

To evaluate style properties of an element, you need to use the window.getComputedStyle() method.

In your case, the code should be:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;style&gt;
#div {
  visibility: hidden;
}
&lt;/style&gt;
&lt;body&gt;

&lt;button id=&quot;button&quot;&gt; toggle &lt;/button&gt;

&lt;div id=&quot;div&quot;&gt;
  &lt;h1&gt; Hello, World! &lt;/h1&gt;
&lt;/div&gt;

&lt;script&gt;
let button = document.querySelector(&quot;#button&quot;);
button.addEventListener(&quot;mouseup&quot;, toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById(&quot;div&quot;);
  
 &#160;if(window.getComputedStyle(div).visibility === &quot;hidden&quot;) {
    div.style.visibility = &quot;visible&quot;;
  } else {
    div.style.visibility = &quot;hidden&quot;;
  }
}

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案3

得分: 0

所以如果你不想使用内联样式；

&lt;!-- 开始代码片段：js 隐藏：false 控制台：true Babel：null --&gt;

&lt;!-- 语言：lang-js --&gt;

    let button = document.querySelector("#button");
    button.addEventListener("mouseup", toggleVisibility)

    function toggleVisibility() {
      let div = document.getElementById("div");
      let compStylesStatus = window.getComputedStyle(div).getPropertyValue('visibility');

      if (compStylesStatus  === "hidden") {
           div.style.visibility = "visible";
      } else {
           div.style.visibility = "hidden"
      }
    }

&lt;!-- 语言：lang-css --&gt;

    #div {
      visibility: hidden;
    }

&lt;!-- 语言：lang-html --&gt;

    &lt;button id="button"&gt; 切换 &lt;/button&gt;

    &lt;div id="div"&gt;
      &lt;h1&gt; 你好，世界！ &lt;/h1&gt;
    &lt;/div&gt;

&lt;!-- 结束代码片段 --&gt;

英文:

Soi if you don't want to use inline-css;

let button = document.querySelector(&quot;#button&quot;);
button.addEventListener(&quot;mouseup&quot;, toggleVisibility)

function toggleVisibility() {
  let div = document.getElementById(&quot;div&quot;);
  let compStylesStatus = window.getComputedStyle(div).getPropertyValue(&#39;visibility&#39;);

  if (compStylesStatus  === &quot;hidden&quot;) {
       div.style.visibility = &quot;visible&quot;;
  } else {
       div.style.visibility = &quot;hidden&quot;
  }
}

#div {
  visibility: hidden;
}

&lt;button id=&quot;button&quot;&gt; toggle &lt;/button&gt;

&lt;div id=&quot;div&quot;&gt;
  &lt;h1&gt; Hello, World! &lt;/h1&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

为什么只有在第二次点击后才能切换可见性？

问题

答案1

答案2

答案3

按钮未禁用，当 error=true 时也是如此。

如何使用复选框和自动求和功能读取多个值？

addEventListener回调未从


确定