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 相关文章推荐
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
javascript数据类型详解
Feb 07 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
js前端图片加载异常兜底方案
Jun 21 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
10个实用的PHP正则表达式汇总
2014/10/23 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
单链表反转python实现代码示例
2018/02/08 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
python 实现性别识别
2020/11/21 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
商务会议邀请函
2014/01/09 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python