(编辑:jimmy 日期: 2024/10/30 浏览:2)
我们在网页中经常需要控制一些元素的隐藏、透明等属性
<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++; }})();