本文摘自PHP中文网,作者V,侵删。
把css样式隐藏起来的方法是,给元素设置【display:none;】属性,这样元素便会被隐藏,同时不再占据原来的位置。如果要重新显示元素,可以设置【displayL:block;】属性。
本文操作环境:windows10系统、css 3、thinkpad t480电脑。
如果我们要隐藏css中的样式,那么我们可以使用display属性,这个属性的其中一个属性值是none。
一个样式在设置了display:none属性后,元素便会被隐藏,不再占据原来的位置。如果我们要重新显示该元素,只需要设置display:block;即可,这样一来元素便会重新显示出来。
我们来做一个简单的代码测试,有两个按钮,点击开的按钮,div标签的dispaly属性改为 block,显示出来,点击关的按钮,div标签的dispaly属性改为 none,隐藏出来。
具体代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!DOCTYPE html>
<html>
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<title>Document</title>
<style>
*{
margin : 0 ;
padding : 0 ;
}
body{
background-color : rgba( 0 , 0 , 0 , 0.8 );
}
.b 1 {
width : 150px ;
height : 30px ;
margin-top : 100px ;
margin-left : 500px ;
}
.b 2 {
width : 150px ;
height : 30px ;
margin-top : 100px ;
margin-left : 100px ;
}
div{
display : none ;
width : 300px ;
height : 300px ;
background-color : yellow;
border-radius: 50% ;
margin : 50px auto ;
}
</style>
</head>
<body>
<button> 开</button>
<button>关</button>
<div></div>
<script>
var btn 01 = document.querySelector( ".b1" );
var btn 02 =document.querySelector( ".b2" )
var div 01 = document.querySelector( "div" )
btn 01 .addEventListener( "click" ,function(){
div 01 .style.display = "block" ;
})
btn 02 .addEventListener( "click" ,function(){
div 01 .style.display = "none" ;
})
</script>
</body>
</html>
|
运行截图如下:
相关视频教程分享:css视频教程
以上就是css样式怎么隐藏起来的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css表示什么
css如何修改光标颜色
如何替换bootstrap中的样式
css怎么排除第一个子元素
css文件的扩展名是什么?
css 层叠是什么
如何利用css画出一个三角形
如何解决css英文不自动换行的问题
css盒模型有哪些属性
css三种样式表写法是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css样式怎么隐藏起来