操作样式显示属性

Manipulate the Style Display property

本文关键字：属性 显示 样式 操作      更新时间：2023-09-26
<!DOCTYPE html>
<html>
   <head>
      <style> 
         #myDIV {
         width: 500px;
         height: 500px;
         background-color: lightblue;
         }
      </style>
   </head>
   <body>
      <p>Click the "Try it" button to set the display property of the DIV element to "none":</p>
      <button onclick="myFunction()">Try it</button>
      <div id="myDIV">
         This is my DIV element.
      </div>
      <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
      <script>
         function myFunction() {
             document.getElementById("myDIV").style.display = "none";
         }
      </script>
   </body>
</html>

我正在使用样式显示属性。我如何操作代码，以便在开始时隐藏DIV元素，当我单击按钮时，它会出现?

修改Javascript函数:

function myFunction() {
    document.getElementById("myDIV").style.display = "block";
}
CSS:

和

#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    display: none;
}

所以基本上#myDIV一开始不会显示。点击按钮后，myFunction()运行，#myDIV显示为block, div默认显示为block。

您可以在div上初始设置一个display:none。和javascript代码，你应该工作，除了改变none为block

必须为display: none;添加div的样式。

当按钮触发时，您需要更改显示。

document.getElementById("myDIV").style.display = "block";

试试下面的代码，如果可以的话

<!DOCTYPE html>
<html>
   <head>
      <style> 
         #myDIV {
         width: 500px;
         height: 500px;
         background-color: lightblue;
         display:none;
         }
      </style>
   </head>
   <body>
      <p>Click the "Try it" button to set the display property of the DIV element to "none":</p>
      <button onclick="myFunction()">Try it</button>
      <div id="myDIV">
         This is my DIV element.
      </div>
      <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
      <script>
         function myFunction() {
             document.getElementById("myDIV").style.display = "block";
         }
      </script>
   </body>
</html>
相关文章：