使用 JavaScript 如何让图片消失, 隐藏起来? 下面本篇文章就来给大家介绍一下使用使用 JavaScript 让图片消失 (隐藏) 的方法, 希望对大家有所帮助.
在 JavaScript 中, 可以通过 Style 对象设置 display 属性值为 none, 或 visibility 属性的值为 hidden 来让图片消失, 隐藏起来.
1, 使用 display 属性
display 属性设置或返回元素的显示类型. 只要将 display 属性的设置为 none, 则元素就不会被显示.
语法:
Object.style.display="none"
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <style>
- img { width: 300px; }
- </style>
- <body>
- <input id="btn" type="button" value="消失">
- <br />
- <br />
- <img src="1.jpg" id="pic">
- <script>
- var btn = document.getElementById("btn");
- var pic = document.getElementById("pic");
- btn.onclick = function() {
- pic.style.display = "none";
- }
- </script>
- </body>
- </HTML>
效果图:
2, 使用 visibility 属性
visibility 属性设置元素是否可见. 只要将 visibility 属性的设置为 hidden, 则元素就不可见了.
语法:
Object.style.visibility="hidden"
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <style>
- img { width: 300px; }
- </style>
- <body>
- <input id="btn" type="button" value="消失">
- <br />
- <br />
- <img src="1.jpg" id="pic">
- <script>
- var btn = document.getElementById("btn");
- var pic = document.getElementById("pic");
- btn.onclick = function() {
- pic.style.visibility = "hidden";
- }
- </script>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/javascript/11278.html