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 相关文章推荐
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 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
多重?l件?合查?(二)
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
Python正确重载运算符的方法示例详解
2017/08/27 Python
理解python中生成器用法
2017/12/20 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
销售人员中英文自荐信
2013/09/22 职场文书
业务经理岗位职责
2013/11/11 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
《学会待客》教学反思
2014/02/22 职场文书
2014年新生军训方案
2014/05/01 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
骨干教师个人总结
2015/02/11 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
2016中考冲刺决心书
2015/09/22 职场文书