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如何调用qq互联api实现第三方登录
Mar 28 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
js实现微信聊天界面
Aug 09 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
浅谈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脚本的10个技巧(4)
2006/10/09 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Date对象格式化函数代码
2010/07/17 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
jQuery实现的分页插件完整示例
2020/05/26 jQuery
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python人民币小写转大写辅助工具
2018/06/20 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
详解Python中的文件操作
2021/01/14 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
小学英语教学反思
2014/01/30 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
高三家长寄语
2014/04/03 职场文书
校园标语大全
2014/06/19 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
廉政教育的心得体会
2014/09/01 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书