Javascript：为什么我必须单击 2 次才能运行该功能？_JavaScript

window.onload = function(){
   var about2 = document.getElementById("about");
   about2.addEventListener("click",about);

}

function about(){
var divabout = document.getElementById("aboutme");
 if(divabout.style.display == "none"){
    divabout.style.display = "flex";
    divabout.style.justifyContent ="center";
 }else{
    divabout.style.display ="none"; 
 }
}

请告诉我为什么我必须单击两次才能运行此功能。以及如何修复请。 非常感谢。 我只是在 css 中为 1 个 div 标签设置了 display:none ，我想更改显示属性。

因为默认情况下您没有为 HTML 设置任何 display 属性。 这就是为什么在第一次点击 javascript 设置它需要的一切。 然后从第二次点击开始工作。

这是您的代码，您没有在 html 中添加样式

<div id="about">Hello</div>
    <div id="aboutme">About Me</div>

在这里，如果我修复/添加这个style="display:flex;justify-content: center;" 在你的关于我这样的

<div id="about">Hello</div>
    <div id="aboutme" style="display:flex;justify-content: center;">About Me</div>

现在你可以检查你只需要一键运行

 window.onload = function() { var about2 = document.getElementById("about"); about2.addEventListener("click", about); } function about() { var divabout = document.getElementById("aboutme"); if (divabout.style.display == "none") { divabout.style.display = "flex"; divabout.style.justifyContent = "center"; } else { divabout.style.display = "none"; } }

 <div id="about">Hello</div> <div id="aboutme" style="display:flex;justify-content: center;">OK About Me</div>

Javascript：为什么我必须单击 2 次才能运行该功能？

问题描述

1楼