使用display属性隐藏或显示HTML中的元素-yiteyi-C++库

Style display属性用于通过使用JavaScript/jQuery访问DOM元素来隐藏和显示HTML DOM的内容。

null

要隐藏元素，请将“样式显示”属性设置为“无”。

document.getElementById("element").style.display = "none";

要显示元素，请将“样式显示”属性设置为“块”。

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

显示工作样式显示属性的步骤：

创建一些div，给它们分配一个id或class，然后添加样式。

<div class= "circle" id= "circle" ></div>

<div class= "rounded" id= "rounded" ></div>

<div class= "square" id= "square" ></div>

宽度和高度将设置内容的宽度和高度，边框半径0%将形成方形边框，50%将形成圆形，25%将形成圆形，浮动将使div定位，右边距将使它们用右边的空格隔开。

                           <style type=                                        "text/css"                                        >                         
                                                     .circle {                         
                                                     width: 130px;                         
                                                     height: 130px;                         
                                                     border-radius: 50%;                         
                                                     float: left;                         
                                                     margin-right: 50px;                         
                                                     }                         
                                      
                                                     .rounded {                         
                                                     width: 130px;                         
                                                     height: 130px;                         
                                                     border-radius: 25%;                         
                                                     float: left;                         
                                                     margin-right: 50px;                         
                                                     }                         
                                      
                                                     .square {                         
                                                     width: 130px;                         
                                                     height: 130px;                         
                                                     border-radius: 0%;                         
                                                     float: left;                         
                                                     margin-right: 50px;                         
                                                     }                         

背景色将设置div的背景色。

                           #circle {                         
                                                     background-color:                                        #196F3D;                         
                                                     }                         
                                      
                           #rounded {                         
                                                     background-color:                                        #5DADE2;                         
                                                     }                         
                                      
                           #square {                         
                                                     background-color:                                        #58D68D;                         
                                                     }                         

文件。getElementById将选择具有给定id的div。

<script type= "text/javascript" >

document.getElementById( "circle" ).onclick = function ()

风格。display=“none”将使其在单击div时消失。
.style.display = "none" ;

风格的实现。显示属性：

                     <                               html                               >                   
                     <                               head                               >                   
                             
                                         <                               title                               >Javascript</                               title                               >                   
                             
                                         <                               style                               type                               =                               "text/css"                               >                   
                                         .circle {                   
                                         width: 130px;                   
                                         height: 130px;                   
                                         border-radius: 50%;                   
                                         float: left;                   
                                         margin-right: 50px;                   
                                         }                   
                             
                                         .rounded {                   
                                         width: 130px;                   
                                         height: 130px;                   
                                         border-radius: 25%;                   
                                         float: left;                   
                                         margin-right: 50px;                   
                                         }                   
                             
                                         .square {                   
                                         width: 130px;                   
                                         height: 130px;                   
                                         border-radius: 0%;                   
                                         float: left;                   
                                         margin-right: 50px;                   
                                         }                   
                             
                                         #circle {                   
                                         background-color: #196F3D;                   
                                         }                   
                             
                                         #rounded {                   
                                         background-color: #5DADE2;                   
                                         }                   
                             
                                         #square {                   
                                         background-color: #58D68D;                   
                                         }                   
                                         </                               style                               >                   
                             
                     </                               head                               >                   
                             
                     <                               body                               >                   
                             
                                         <                               div                               class                               =                               "circle"                               id                               =                               "circle"                               ></                               div                               >                   
                             
                                         <                               div                               class                               =                               "rounded"                               id                               =                               "rounded"                               ></                               div                               >                   
                             
                                         <                               div                               class                               =                               "square"                               id                               =                               "square"                               ></                               div                               >                   
                             
                                         <                               script                               type                               =                               "text/javascript"                               >                   
                                         document.getElementById("circle").onclick = function() {                   
                             
                                         document.getElementById("circle").style.display = "none";                   
                             
                                         }                   
                             
                                         document.getElementById("rounded").onclick = function() {                   
                             
                                         document.getElementById("rounded").style.display = "none";                   
                             
                                         }                   
                             
                                         document.getElementById("square").onclick = function() {                   
                             
                                         document.getElementById("square").style.display = "none";                   
                             
                                         }                   
                                         </                               script                               >                   
                             
                     </                               body                               >                   
                             
                     </                               html                               >                   