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

英文:

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

确保所有可感知的文本包含在 ARIA 地标中。

排除工作时间的JS中断时间。

你可以使用CSS在应用程序中每3个数字之间添加逗号来实现吗？

Align the first div on the same height with the second div, the first div should be placed closest to the left and the second closeste to the right

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论