javascript实现电脑和手机版样式切换

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于JS实现简单的样式切换效果代码

    基于JS实现简单的样式切换效果代码

    本文实例讲述了基于JS实现简单的样式切换效果.分享给大家供大家参考.具体如下: 这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,我觉得这是个挺实用的不错的功能,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

  • 详解AngularJS ng-class样式切换

    详解AngularJS ng-class样式切换

    整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g

  • JS实现的样式切换功能tableCSS实例

    本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r

  • 基于JS实现翻书效果的页面切换样式

    本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <

  • javascript实现电脑和手机版样式切换

    本文实例为大家分享了javascript实现电脑和手机版样式切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ list-style: none; } </style> </head&

  • JAVASCRIPT代码编写俄罗斯方块网页版

    JAVASCRIPT代码编写俄罗斯方块网页版

    俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧...... HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释 效果: 按键提示:[键盘按键] 素材:图片名字与代码里对应 1.背景图片:tetris.png 2.失败时候的弹出框图片:game-over.png 3.七种色彩小方块图片:  

  • wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

  • JS限定手机版中图片大小随分辨率自动调整的方法

    实例如下: <script type="text/javascript"> var ObjImg = jQuery(".Dy_Content img"); for (var i = 0; i < ObjImg.length; i++) { loadImage(ObjImg.eq(i)); } function loadImage(Obj) { var b_width = 320; var img = new Image(); img.src = j

  • 鸿蒙手机版JNI实战案例解析（JNI开发、SO库生成、SO库使用）

    鸿蒙手机版JNI实战案例解析（JNI开发、SO库生成、SO库使用）

    鸿蒙JNI开发现状 现阶段,不仅鸿蒙JNI相关的开发资料较少,而且Phone相关的JNI开发资料几乎没有,这对于新入行的鸿蒙开发者们来说,非常不友好. 也可能会给Android工程(使用了SO库的工程)在迁移至鸿蒙系统时造成了阻碍. 案例演示 废话不多说了,接下来,我们来演示鸿蒙手机版工程是如何做JNI开发的. 案例1:Native项目 如果开发者们只是想做简单的Native开发,并非为第三方提供SO库,这就非常简单了,详细如下: 1.创建Native C++工程 目前,通过DevEco-Stu

  • 用JavaScript动态建立或增加CSS样式表的实现方法

    1.简单的方法,不管不顾,直接这样就可以: document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解,并不会写入CSS中 'width:300px;height:150px}' + '.类名{--}' + '#ID们{--}' ; //完活.我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候. 2.完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现: if

  • 详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换

    详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式.效果如下: 原理主要是通过判断一个radio-group中哪个被选中,就让它加上一个"active"的样式. 代码如下: <!--index.wxml--> <view class="container"> <radio-group bindchange="radioCheckedChange"> <vi

随机推荐