display 和 visiability 区别-优快云博客

本文详细解释了CSS中display和visibility属性的区别，并通过实例展示了如何使用这些属性来控制元素的显示与隐藏。此外，还提供了两个JavaScript应用示例，帮助读者更好地理解这两种属性的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display 和 visiability 区别
这个属性都可以用于设置某个区域或者控件，显示不显示,

display 设置 none; 它不显示同时让出自己占用的空间
visiability 这个属性设置成 hidden 就不显示, 但是它不让这个空间.

style对象的案例:

<body>
<span id="myspan" οnclick="test(this);" style="border: 3px solid red;cursor:hand;

">+</span> 我的家庭
<ul id="myul" style="display:none">

</ul>
</body>
<script type="text/javascript">

<!--

function test(obj){

//myspan if(obj.innerText=="+"){

//显示成员

myul.style.display="block";

obj.innerText="-";

}else if(obj.innerText=="-"){

myul.style.display="none";

obj.innerText="+";

}

//-->

</script>

style 的小案例- 简易购物车

<body>
<h1>请选择你喜欢的水果</h1>

</body>

<!--

var allPrice=0;

function shop(obj,price){

//遍历整个复选框，看看谁被选中.

/* var frutis=document.getElementsByName("fruits");

for(var i=0;i<frutis.length;i++){

//if(frutis[i].checked){

// window.alert(frutis[i].value+"被选中"+" 该价格是"+frutis[i].price);

//}

if(frutis[i].checked){

allPrice+=parseInt(frutis[i].price);

}

}*/

//直接判断点击行为是选中，还是取消,然后是决定对allPrice进行+,-

if(obj.checked){

//window.alert("中");

allPrice+=parseInt(obj.price);

}else{

//window.alert("取消");

allPrice-=parseInt(obj.price);

}

showres.innerText=allPrice;

}

//-->

</script>