<html lang="en"> <head> <meta charset="UTF-8"> <title>标签或者内容的隐藏</title> <style> .display-none{ display:none; } .display-block{ display:inline-block; } /* visibility属性 */ .visibility-hidden{ visibility:hidden; } .visibility-visible{ visibility:visible; } </style> </head> <body> <h3>1.hidden属性</h3> <span id="hidden" hidden>通过hidden属性显示或隐藏</span> <span style="width:30px;height:30px;background-color:pink;" onclick="fnHidden()">hidden属性--点击</span> <h3>2.style的display属性</h3> <span id="display" class="display-none">通过display属性显示或者隐藏</span> <span style="width:30px;height:30px;background-color:pink;" onclick="fndDisplay()">display属性--点击</span> <h3>2.style的display属性</h3> <span id="visibility" class="visibility-hidden">visibility属性显示或者隐藏</span> <span style="width:30px;height:30px;background-color:pink;" onclick="fnVisibility()">visibility属性--点击</span> <h2 style="color:red;">总结</h2> 方式1和方式2：隐藏元素不会占位置;<br/> 方式3，隐藏元素依旧占位子，避免空出位置。 </body> <script type="text/javascript"> /** *hidden属性应用 --方式1 */ function fnHidden(){ var ele = document.getElementById('hidden'); var flag = ele.hasAttribute('hidden');//是否有hidden属性 if(flag){//隐藏 ele.removeAttribute('hidden'); }else{//显示 ele.setAttribute('hidden','hidden'); } } /** *display属性--方式1 */ function fndDisplay(){ var ele = document.getElementById('display'); var className = ele.className; if(className == 'display-none'){//隐藏 ele.className = 'display-block' }else{//显示 ele.className = 'display-none' } } /** *visibility属性--方式3 */ function fnVisibility(){ var ele = document.getElementById('visibility'); var className = ele.className; if(className == 'visibility-hidden'){//隐藏 ele.className = 'visibility-visible' }else{//显示 ele.className = 'visibility-hidden' } } </script> </html>
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/17195.html