css基础--显示和隐藏（display，opacity）

83 阅读 0 评论 55 点赞

我是靠谱客的博主舒适红酒，最近开发中收集的这篇文章主要介绍css基础--显示和隐藏（display，opacity），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

visibility和display属性，控制元素的显示和隐藏，

区别：

visibility能够隐藏元素，但是会留下一片空白区域，影响页面的视觉效果

display会破坏页面结构，破坏页面布局，不会留下一片空白

<body>
       <p>p1</p>
       <p class="main">p2</p>
       <p style="float:right;border: solid 1px red;width: 100px;height: 100px;">p3</p>
       <script type="text/javascript">
//           var p=document.getElementsByTagName("p");
//           for(var i=0;i<p.length;i++){
//               if(p[i].className=="main")continue;
//               p[i].style.display="none";//隐藏P2
//               p[i].style.display='';//恢复P2
//           }
           //设置或切换元素的显示或隐藏。（封装）
           function getStyle(e,n){//e表示元素，n表示属性名，如“width”、“borderColor”
               if(e.style[n]){//若果在style中显示定义
                   return e.style[n];
                   }else if(e.currentStyle){//否则，在IE
                       return e.currentStyle[n]
                   }else if(document.defaultView&&document.defaultView.getComputedStyle){//非ie(DOM标准)
                       n=n.replace(/([A-Z])/g,"-$1");//转换参数的属性名 borderColor--> border-Color
                       n=n.toLocaleLowerCase();//border-Color-->border-color
                       var s= document.defaultView.getComputedStyle(e,null);
                       if(s){
                           return s.getPropertyValue(n)
                       }
                   }else{
                       return null;//如果不支持，返回null
                   }
           }
           function display(ele,b){
               if(b&&(typeof b !="boolean"))throw new Error("第二个参数应该是布尔值！");
               var c=getStyle(ele,"display");
               (c!="none")&&(ele._display=c);//记录元素的显示性质，并存储到元素的属性中
               ele._display=ele._display||"";//如果没有定义显示性质，则赋值为空字符串
               if(b||(c=="none")){
                   ele.style.display=ele._display;
               }else{
                   ele.style.display="none";
               }
           }
           var p3=document.getElementsByTagName("p")[2];
           display(p3);//隐藏
           display(p3);//显示
           display(p3);//隐藏
           display(p3,true)//强制显示
       </script>

   </body>

透明度

<script type="text/javascript">
           function setOpactity(ele,n){//n表示一个数，0——100的数，若省略默认为100，即不透明
               var n=parseFloat(n);
               if(n&&(n>100)||!n)n=100;
               if(n&&(n<0))n=0;
               if(ele.filters){
                   ele.style.filter="alpha(opacity="+n+")";
               }else{
                   ele.style.opacity=n/100;
               }
           }

           function getOpactity(ele){
               var r;
               if(!ele.filters){
                   if(ele.style.opactity)return parseFloat(ele.style.opactity)*100;
               }
               try{//IE浏览器不能直接通过属性读取，须借助filter集合的item（）方法获取Alpha对象，为避免发生错误，使用try语句
                   return ele.filters.item('alpha').opactity
               }catch(e){
                   return 100;
               }
           }
       </script>