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做拖动布局的思路
May 31 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
详解Vue template 如何支持多个根结点
Feb 10 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
php连接mysql数据库
2017/03/21 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
js常用函数 不错
2006/09/08 Javascript
Maps Javascript
2007/01/22 Javascript
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Python标准库之itertools库的使用方法
2017/09/07 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python写一个md5解密器示例
2018/02/23 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
优秀通讯员事迹材料
2014/01/28 职场文书
人事经理岗位职责
2014/04/28 职场文书
中秋节慰问信
2015/02/15 职场文书
学生病假条怎么写
2015/08/17 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
基于Python实现西西成语接龙小助手
2022/08/05 Golang