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

CSS之visibility和display的差别

2016-08-23 17:01 246 查看

今天又看到一个坑爹的CSS属性，即标题所说。以前一直用的是display：none。然后我试了下那篇文章上说的。设置了下visivblity:hidden的效果。最开始让我有点儿想当然了

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}

.test1 {
width: 300px;
height: 300px;
background: red;
float: left;
visibility: hidden;
}

.test2 {
width: 300px;
height: 300px;
background: green;
float: left;
}
</style>
<script>
window.onload = function() {

document.getElementById("div1").onclick = function() {
alert("OK");
};

}
</script>
</head>

<body>
<div class="test1" id="div1">

</div>
<div class="test2">

</div>
</body>

</html>

感觉上是不就是opacity设置为0的效果吗？如果是的话，那么我给它设置事件，在opacity为0的条件下点击会有事件响应的，但是我加上事件之后，发现并不是的。

于是得出结论visibility:hidden介于display:none和opacity:0之间。

我暂时没有找到这个的用处，不过常见的自定义上传按钮，就是在一个背景图片上放一个<input type="file" />，然后将它的opacity置为0，这样就比较美观大方了。

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

标签：

相关文章推荐

新的分享

章节导航