编程 Javascript

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

Posted in Javascript onNovember 10, 2017

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

- Author -

mr_tangshuai

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 全面解析各种浏览器网页中的JS 执行顺序

Feb 17 Javascript

一组JS创建和操作表格的函数集合

May 07 Javascript

js限制文本框输入长度两种限制方式(长度、字节数)

Dec 19 Javascript

js中Math之random,round,ceil,floor的用法总结

Dec 26 Javascript

在JS数组特定索引处指定位置插入元素的技巧

Aug 24 Javascript

node.js中的fs.lstat方法使用说明

Dec 16 Javascript

javascript随机显示背景图片的方法

Jun 18 Javascript

基于JavaScript如何实现ajax调用后台定义的方法

Dec 29 Javascript

从零搭一个自用的前端脚手架的方法步骤

Sep 23 Javascript

微信小程序wxml列表渲染原理解析

Nov 27 Javascript

ES6中Set和Map用法实例详解

Mar 02 Javascript

js实现鼠标切换图片（无定时器）

Jan 27 Javascript

浅谈jquery中ajax跨域提交的时候会有2次请求的问题

Nov 10 #jQuery

js定时器+简单的动画效果实例

Nov 10 #Javascript

浅谈Node.js CVE-2017-14849 漏洞分析（详细步骤）

Nov 10 #Javascript

angular之ng-template模板加载

Nov 09 #Javascript

深入理解Vue 单向数据流的原理

Nov 09 #Javascript

node.js基于express使用websocket的方法

Nov 09 #Javascript

angular2系列之路由转场动画的示例代码

Nov 09 #Javascript