您的位置：首页 > Web前端 > JavaScript

js：div元素display属性与visibility属性的区别

2014-06-05 22:16 471 查看

<head>

<title>display属性与visibility属性的区别</title>



<style type="text/css">

div {

border: 1px red solid;

height: 300px;

width: 300px;

}

</style>

<script type="text/javascript">

window.onload = function () {

document.getElementById('btnDisplay').onclick = function () {

document.getElementById('dv').style.display = 'none';

};

document.getElementById('btnVisibility').onclick = function () {

document.getElementById('dv').style.visibility = 'hidden';

};

};

</script>

</head>

<body>

<input type="button" id="btnDisplay" value="display"/>

<input type="button" id="btnVisibility" value="visibility"/>

头

<div id="dv">

大家好！

</div>

尾

</body>

display属性的值包括：none,block,inline等

visibility属性的值包括：hidden,visible等

当display属性的值为none时，div隐藏，不占据位置，显示结果如下：

当display属性的值为hidden时，div隐藏，占据位置，显示结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航