javascript实现电脑和手机版样式切换

2019-11-19 14:57:21

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了javascript实现电脑和手机版样式切换的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title></title>     <style type="text/css">       ul{         list-style: none;       }            </style>   </head>   <body>     <ul>       <li>首页</li>       <li>公司概况</li>       <li>产品介绍</li>       <li>成功案例</li>       <li>合作伙伴</li>     </ul>     <div>            <button onclick="addStyle()">添加样式效果</button>       <button onclick="showStyle('pc')">电脑版</button>       <button onclick="showStyle('mobile')">手机版</button>     </div>     <script>       function addStyle()       {         //根据元素的标记名获取元素         var lis = document.getElementsByTagName('li');         for(var i = 0;i<lis.length;i++)         {           lis[i].style.width = '150px';           lis[i].style.height= '30px';           lis[i].style.padding = '5px 10px';           lis[i].style.marginTop = '1px';           lis[i].style.backgroundColor = 'rgb(51,51,51)';           lis[i].style.textAlign = 'center';           lis[i].style.lineHeight = '30px';           lis[i].style.color='#fff';         }       }              function showStyle(type)       {         var lis = document.getElementsByTagName('li');         for(var i = 0;i<lis.length;i++){           if(type == 'pc'){             //PC版             lis[i].style.float = 'left';//左浮动             //移除指定的属性             lis[i].style.removeProperty('clear');             lis[i].style.width='150px';           }else{             //手机版             lis[i].style.clear = 'both';//清除浮动             lis[i].style.width='100%';           }         }              }     </script>   </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS+Canvas绘制动态时钟效果

下一篇：nodejs判断文件、文件夹是否存在及删除的方法