元素隐藏的方式之--hidden,display,visibility

<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>

原文地址:https://www.cnblogs.com/damoblog/p/8744387.html

时间: 2024-11-05 12:08:13

元素隐藏的方式之--hidden,display,visibility的相关文章

js/jquery设置元素隐藏和显示

//js 元素隐藏 document.getElementById('li11').style.display = 'none'; //js 元素显示 document.getElementById('li11').style.display = 'block'; //jquery元素隐藏 $('#li11').hide(); //jquery元素显示 $('#li11').show(); //还有一种方法,在css中设置 .hide{ display: none; } 然后通过js $('#l

如何让html的某个元素隐藏,我们一般有三种方式:display:none, opacity:0, visibility:hidden。但这三种方式有何区别?

1. display:none 该方式让元素隐藏时,隐藏的元素不占空间,隐藏后将改变html原有样式.一旦父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,而且无论其子孙元素如何不屈地挣扎都无济于事. 2. visibility:hidden 该方式让元素隐藏时,隐藏的元素还是占用原有位置,隐藏后不将改变html原有样式.但,如果该元素的子元素使用了visibility:visible的话,改子元素将不被隐藏. 3. opacity:0 该方式让元素隐藏时,隐藏的元素还

css元素隐藏(display:none和visibility:hidden)

在css中, display:none和visibility:hidden都能够使元素隐藏.但是两者所带来的效果完全不同. css  display:none 当使用该样式的时候,HTML元素的宽高等各种属性都将失效,其所占据的空间消失,可将该元素视作完全不存在. css  visibility:hidden 当使用该样式的时候,HTML元素的宽高等各种属性不会失效,其所占据的空间也会被完全保留下来,可将该元素视作完全透明. *当然当某HTML元素具有样式display: none;visibi

(转)css元素隐藏原理及display:none和visibility:hidden

原文链接:http://www.jb51.net/web/73987.html 在CSS中,让元素隐藏指屏幕范围内肉眼不可见的方法很多,只不过有的依然保留空间,而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理,感兴趣的你可不要错过了哈 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.一个一个看. 复制代码 代码如下: { display: none; /* 不占据空间,无法点击 */

CSS隐藏元素的几个方法(display,visibility)的区别

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; top: -999em; /* 占据空间,无法点击 */ } { p

您可能不知道的CSS元素隐藏“失效”以其妙用

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2191 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击

关于元素隐藏/显示的各种方法

元素的隐藏/显示可以说数使用频率最高的方法之一,比如二级菜单,响应式布局,透明过度等等许许多多的特效都会使用到,以下介绍一下元素隐藏的各属性以及他们的特性和使用方法:display  visibility  opacity  overflow  position 我们先设置一些共有属性: <head> <style> div{ width: 100px; height: 100px; background-color: #444; margin: 10px; color: #f00

【CSS】---元素隐藏

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; top: -999em; /* 占据空间,无法点击 */ } { p

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ } { position: absolut