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>

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

Javascript 相关文章推荐
js操作select控件的几种方法
Jun 02 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 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
You might like
php多重接口的实现方法
2015/06/20 PHP
基于php判断客户端类型
2016/10/14 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python中count函数知识点浅析
2020/12/17 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
家庭户外服装:Hawkshead
2017/11/02 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
签约仪式主持词
2014/03/19 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
小学运动会前导词
2015/07/20 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL