我们在网页中经常需要控制一些元素的隐藏、透明等属性
<style> .d1{ display: none; } .d2{ visibility: visible; } .d3{ opacity: 0; } </style> <div class="d1" onclick="clickEvent('display: none;')"></div> <div class="d2" onclick="clickEvent('visibility: hidden;')"></div> <div class="d3" onclick="clickEvent('opacity: 0;')"></div> <script type="text/javascript"> function clickEvent(type){ alert(type) } </script>
小实验
可以自己试一试,玩一哈
// html <div class="container"> <div class="target"> <p>I am target, and you ?</p> </div> </div> // css <style> .container{ margin: 0 auto; width: 500px; min-height: 30px; background-color: skyblue; } .target{ width: 200px; height: 50px; line-height: 50px; text-align: center; margin: 0 auto; background-color: plum; color: #fff; transition: all linear 1s; cursor: pointer; } .clickBlock{ display: none; } .clickVisibility{ visibility: hidden; } .clickOpacity{ opacity: 0; } .clickRgba{ background-color: rgba(221, 160, 221, 0); } .clickZindex{ z-index: -1; position: absolute; } </style> // js const _target = document.getElementsByClassName("target")[0]; _target.onclick = (() => { let i = 1; // click 次数 return () => { // _target.attributes.class.value += " clickBlock"; // _target.attributes.class.value += " clickVisibility"; // _target.attributes.class.value += " clickOpacity"; // _target.attributes.class.value += " clickRgba"; _target.attributes.class.value += " clickZindex"; console.log(`第${i}次点击`); i++; }})();
到此这篇关于css之Display、Visibility 和 Opacity 的区别的文章就介绍到这了,更多相关css控制隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
Mac下安装nvm的方法可以直接见官方文档: https://github.com/nvm-sh/nvm... 我...
我们将使用 CSS3 动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链...
Dreamweaver默认的调试的浏览器只有IE,但是网站在调试的时候,需要在多个浏览器...
我们在网页中经常需要控制一些元素的隐藏、透明等属性 style .d1{ display: none...
设置body的宽度为window的宽度(以下脚本控制) $(body).css(width, $(window).w...
当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体...
前言 如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览...
前言 IOC(Intelligent Operations Center)——智慧城市智能运营中心就是智慧城...
引言 不是所有人都能够使用高速 Internet 连接。即使每个人都能够使用高速网络,...
我们使用translate这个参数来实现移动 translateX:向X轴平移,填正数往右平移,...