<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript：元素的显示和隐藏visibility/display</title>
<script type="text/javascript">
/*
本程序证明了：如果使用visibility属性设置元素不可见，此元素会占据页面上的空间。
使用display属性设置元素不显示，此元素不会占据页面空间。
*/
//1
function toHidden() {
document.getElementById("h1").style.visibility = "hidden";
}
function show1() {
document.getElementById("h1").style.visibility = "visible";
}
//2
function toNone() {
document.getElementById("h2").style.display = "none";
}
function show2() {
document.getElementById("h2").style.display = "block";
}
</script>
</head>
<body>
<div style="display:-webkit-flex;">
<div id="h1" style="width:100px;height: 100px;background-color: red;
color: greenyellow;" onclick="toHidden();">
bugsweet1
</div>
<div id="h2" style="width:100px;height: 100px;
background-color: black;margin-left: 10px;color: greenyellow;"
onclick="toNone();">
bugsweet2
</div>
<div id="h3" style="width:100px;height: 100px;background-color: blue;
margin-left: 10px;color: greenyellow;">
bugsweet3
</div>
</div>
<br/>
<br/>
<input type="button" onclick="show1()" value="显示visibility属性值">
<input type="button" onclick="show2()" value="显示display属性值">
</body>
</html>JavaScript：元素的显示和隐藏visibility/display
猜你喜欢
转载自blog.csdn.net/u013101178/article/details/81354234
今日推荐
周排行