Comment implémenter la fonction de changement de style entre les versions ordinateur et mobile en javascript-js tutoriel-php.cn

Comment implémenter la fonction de changement de style entre les versions ordinateur et mobile en javascript

小云云

Libérer： 2017-12-02 10:36:02

original

2347 Les gens l'ont consulté

JavaScript est un langage de script littéral. Il s'agit d'un langage basé sur un prototype à typage dynamique, faiblement typé, avec prise en charge intégrée des types. Son interpréteur s'appelle le moteur JavaScript, qui fait partie du navigateur et est largement utilisé dans les langages de script côté client. Il a été utilisé pour la première fois sur les pages Web HTML (une application sous Standard Universal Markup Language) pour ajouter des fonctions dynamiques aux pages Web HTML. . L'exemple de cet article partage le code spécifique pour basculer entre les styles de version ordinateur et mobile en JavaScript pour votre référence. Le contenu spécifique est le suivant.

<!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(&#39;pc&#39;)">电脑版</button> 
      <button onclick="showStyle(&#39;mobile&#39;)">手机版</button> 
    </div> 
    <script> 
      function addStyle() 
      { 
        //根据元素的标记名获取元素 
        var lis = document.getElementsByTagName(&#39;li&#39;); 
        for(var i = 0;i<lis.length;i++) 
        { 
          lis[i].style.width = &#39;150px&#39;; 
          lis[i].style.height= &#39;30px&#39;; 
          lis[i].style.padding = &#39;5px 10px&#39;; 
          lis[i].style.marginTop = &#39;1px&#39;; 
          lis[i].style.backgroundColor = &#39;rgb(51,51,51)&#39;; 
          lis[i].style.textAlign = &#39;center&#39;; 
          lis[i].style.lineHeight = &#39;30px&#39;; 
          lis[i].style.color=&#39;#fff&#39;; 
        } 
      } 
         
      function showStyle(type) 
      { 
        var lis = document.getElementsByTagName(&#39;li&#39;); 
        for(var i = 0;i<lis.length;i++){ 
          if(type == &#39;pc&#39;){ 
            //PC版 
            lis[i].style.float = &#39;left&#39;;//左浮动 
            //移除指定的属性 
            lis[i].style.removeProperty(&#39;clear&#39;); 
            lis[i].style.width=&#39;150px&#39;; 
          }else{ 
            //手机版 
            lis[i].style.clear = &#39;both&#39;;//清除浮动 
            lis[i].style.width=&#39;100%&#39;; 
          } 
        } 
         
      } 
    </script> 
  </body> 
</html>

Copier après la connexion

Le contenu ci-dessus est un tutoriel sur la façon d'implémenter la fonction de changement de style entre les versions ordinateur et mobile en JavaScript. J'espère que cela pourra aider tout le monde.

Recommandations associées :

Syntaxe de base des notes d'étude JavaScript

Mode d'apparence de JavaScript

Implémenter un code d'effet de changement de style simple basé sur les compétences JS_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!