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 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
JS实现div居中示例
Apr 17 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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 表单验证实现代码
2009/03/10 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
python发送伪造的arp请求
2014/01/09 Python
Python实现的二维码生成小软件
2014/07/11 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python实现注册、登录小程序功能
2018/09/21 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python动态规划算法实例详解
2020/11/22 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
社保代办委托书怎么写
2014/10/06 职场文书
老人与海读书笔记
2015/06/26 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技