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 相关文章推荐
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 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/07/16 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
重定向实现代码
2006/11/20 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python中正则表达式的使用详解
2014/10/17 Python
Python入门篇之数字
2014/10/20 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python列表与元组的异同详解
2019/07/02 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
关于Python错误重试方法总结
2021/01/03 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
银行招聘自荐信
2015/03/06 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
go xorm框架的使用
2021/05/22 Golang
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS