在此示例中,我们将看到如何使用JavaScript的
style.display 属性删除元素。这里,有一个
div 元素和一个段落元素,它们在单击给定的HTML按钮。我们必须点击
"Click me!" 按钮才能看到效果。
<!DOCTYPE html> <html> <head> <title> style.display </title> </head> <body> <p> Welcome to the lidihuo.com </p> <p> Example of the JavaScript's style.display property </p> <div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;"> This is the div element. </div> <p id = "p"> This is a paragraph element. </p> <button onclick = "fun()" id = "btn"> Click me! </button> <script> function fun() { document.getElementById("div").style.display = "none"; document.getElementById("p").style.display = "none"; } </script> </body> </html>
输出
Welcome to the lidihuo.com
Example of the JavaScript's style.display property
<!DOCTYPE html> <html> <head> <title> style.visibility </title> </head> <body> <p> Welcome to the lidihuo.com </p> <p> Example of the JavaScript's style.visibility property </p> <div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;"> This is the div element. </div> <p id = "p"> This is a paragraph element. </p> <button onclick = "fun()" id = "btn"> Click me! </button> <script> function fun() { document.getElementById("div").style.visibility = "hidden"; document.getElementById("p").style.visibility = "hidden"; } </script> </body> </html>
输出
Welcome to the lidihuo.com
Example of the JavaScript's style.visibility property
This is the div element.
This is a paragraph element.
Example3
在此示例中,我们同时使用了
style.display 和
style.visibility JavaScript属性,以查看两者之间的区别。在这里,有一个
div 元素和
<b> 标题元素。我们将在这些元素上应用属性。我们隐藏的div通过应用元件的style.display属性,和隐藏<b>通过将元件style.visibility属性。
我们必须点击
'Click me!" 按钮查看效果。
<!DOCTYPE html> <html> <head> <title> JavaScript hide elements </title> </head> <body> <p> Welcome to the lidihuo.com </p> <p> Using both style.visibility and style.display properties </p> <div id = "div" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;"> This is the div element. </div> <p> This is a paragraph element. </p> <b id = "heading"> This is the heading after the paragraph element. </b> <button onclick = "fun()" id = "btn"> Click me! </button> <script> function fun() { document.getElementById("div").style.visibility = "hidden"; document.getElementById("heading").style.display = "none"; } </script> </body> </html>
输出
Welcome to the lidihuo.com
Using both style.visibility and style.display properties