前后文说法矛盾, 来帮我解答下；
黄修
2017-08-02 17:16
CSS visibility的值是hidden
到底是显示的还是隐藏的？
开始说：
我们有几种方式可以隐藏一个元素：
CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
后边又说：
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
2回答
-
- 黄修
- 2017-08-02 19:57:11
对于平时的语言习惯，即使占据空间也可以是隐藏；而这里讲的选择器认为，占据空间便是可见的，大概是因为其被感知到了。
-
- 黄修
- 2017-08-02 19:37:27
好吧，自己测了下，确定了后者是正确的（附测试代码）：
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>可见性筛选选择器</h2>
<h3>:visible/:hidden</h3>
<div class="left">
<div class="div">
<a>display</a>
<p id="div1" style="display:none;">display</p>
</div>
<div class="div">
<a>width</a>
<a>height</a>
<p id="div2" style="width:0;height:0">width/height</p>
</div>
<div class="div">
<a>visibility</a>
<a>opacity</a>
<p id="div3" style="visibility:hidden;opacity:0">visibility</p>
</div>
</div>
<p id="show1"></p>
<script type="text/javascript">
function show1 (ele) {
if (ele instanceof jQuery) {
$("#show1").html('元素的长度的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<p id="show2"></p>
<script type="text/javascript">
function show2 (ele) {
if (ele instanceof jQuery) {
$("#show2").html('元素的长度的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<p id="show3"></p>
<script type="text/javascript">
function show3 (ele) {
if (ele instanceof jQuery) {
$("#show3").html('元素的长度的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<p id="show4"></p>
<script type="text/javascript">
function show4 (ele) {
if (ele instanceof jQuery) {
$("#show4").html('元素的长度的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<p id="show5"></p>
<script type="text/javascript">
function show5 (ele) {
if (ele instanceof jQuery) {
$("#show5").html('元素的长度的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<p id="show6"></p>
<script type="text/javascript">
function show6 (ele) {
if (ele instanceof jQuery) {
$("#show6").html('元素的长度的 = ' + ele.length)
} else {
alert(ele+' 不是jQuery对象')
}
}
</script>
<script type="text/javascript">
//查找id = div1的DOM元素,是否可见
show1( $('#div1:visible') );
</script>
<script type="text/javascript">
//查找id = div2的DOM元素,是否可见
show2( $("#div2:visible") );
</script>
<script type="text/javascript">
//查找id = div3的DOM元素,是否可见
show3( $("#div3:visible") );
</script>
<script type="text/javascript">
//查找id = div1的DOM元素,是否隐藏
show4( $("#div1:hidden") );
</script>
<script type="text/javascript">
//查找id = div2的DOM元素,是否隐藏
show5( $("#div2:hidden") );
</script>
<script type="text/javascript">
//查找id = div3的DOM元素,是否隐藏
show6( $("#div3:hidden") );
</script>
</body>
</html>
jQuery基础 (一)—样式篇
217509 学习 · 1218 问题
相似问题