Heim > Artikel > Web-Frontend > So implementieren Sie die Stilwechselfunktion zwischen Computer- und Mobilversionen in Javascript

So implementieren Sie die Stilwechselfunktion zwischen Computer- und Mobilversionen in Javascript

小云云Original: 2017-12-02 10:36:022337Durchsuche

JavaScript ist eine wörtliche Skriptsprache. Es handelt sich um eine dynamisch typisierte, schwach typisierte, prototypbasierte Sprache mit integrierter Unterstützung für Typen. Sein Interpreter heißt JavaScript-Engine, ist Teil des Browsers und wird häufig in clientseitigen Skriptsprachen verwendet. Er wurde erstmals auf HTML-Webseiten (einer Anwendung unter Standard Universal Markup Language) verwendet, um HTML-Webseiten dynamische Funktionen hinzuzufügen . . Das Beispiel in diesem Artikel enthält den spezifischen Code zum Wechseln zwischen Computer- und Mobilversionsstilen in JavaScript als Referenz. Der spezifische Inhalt lautet wie folgt.

<!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>

Der obige Inhalt ist ein Tutorial zur Implementierung der Stilwechselfunktion zwischen Computer- und Mobilversionen in JavaScript. Ich hoffe, es kann allen helfen.

Verwandte Empfehlungen:

Grundlegende Syntax von JavaScript-Studiennotizen

Darstellungsmodus von JavaScript

Implementieren Sie einfachen Stilwechseleffektcode basierend auf JS_Javascript-Kenntnissen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Stilwechselfunktion zwischen Computer- und Mobilversionen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So bedienen Sie ein Datumsobjekt in JSNächster Artikel：So bedienen Sie ein Datumsobjekt in JS

In Verbindung stehende Artikel

Mehr sehen