javascript如何實現電腦和手機版樣式切換功能-js教程-PHP中文網

首頁

web前端

js教程

javascript如何實現電腦和手機版樣式切換功能

小云云

Dec 02, 2017 am 10:36 AM

javascript js 功能

JavaScript一種直譯式腳本語言，是一種動態類型、弱型別、基於原型的語言，內建支援類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來為HTML網頁增加動態功能。本文實例為大家分享了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(&#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>

登入後複製

以上內容就是javascript實作電腦和手機版樣式切換功能教學，希望能幫助大家。

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7500

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

豆包app有什麼功能 Mar 01, 2024 pm 10:04 PM

豆包app裡會有很多ai創作的功能，那麼豆包app有什麼功能呢？使用者可以透過這個軟體來創作繪畫，和ai進行聊天，也能夠為用戶生成文章，幫助大家搜尋歌曲等。這篇豆包app功能介紹就能夠告訴大家具體的操作方法，以下就是具體內容，趕快看看吧！豆包app有什麼功能答：可以畫畫、聊天、寫文、找歌。功能介紹：1、問題查詢：可以透過ai來更快的找到問題的答案，什麼樣的問題都是可以詢問。 2.圖片生成：可以有ai來為大家創造不同的圖片，只需要告訴大家大概的要求。 3.ai聊天：能夠為用戶創建一個可以聊天的ai，

vivox100s和x100區別：效能比較及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手機都是vivo手機產品線中的代表機型，它們分別代表了vivo在不同時間段內的高端技術水平，因此這兩款手機在設計、性能和功能上均有一定區別。本文將從效能比較和功能解析兩個面向對這兩款手機進行詳細比較，幫助消費者更好地選擇適合自己的手機。首先，我們來看vivox100s和x100在效能上的比較。 vivox100s搭載了最新的

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

自媒體到底是什麼？它的主要特點和功能有哪些？ Mar 21, 2024 pm 08:21 PM

隨著網路的快速發展，自媒體這個概念已經深入人心。那麼，自媒體到底是什麼呢？它有哪些主要特點和功能呢？接下來，我們將一一探討這些問題。一、自媒體到底是什麼？自媒體，顧名思義，就是自己就是媒體。它是指透過網路平台，個人或團隊可以自主創建、編輯、發布和傳播內容的資訊載體。不同於傳統媒體，如報紙、電視、電台等，自媒體具有更強的互動性和個人化，讓每個人都能成為訊息的生產者和傳播者。二、自媒體的主要特色和功能有哪些？ 1.低門檻：自媒體的崛起降低了進入媒體產業的門檻，不再需要繁瑣的設備和專業的團隊，一部手

小紅書帳號管理軟體有哪些功能？怎麼經營小紅書帳號？ Mar 21, 2024 pm 04:16 PM

隨著小紅書在年輕人中的流行，越來越多的人開始利用這個平台分享各方面的經驗和生活見解。如何有效管理多個小紅書帳號成為關鍵問題。在本文中，我們將討論一些小紅書帳號管理軟體的功能，並探討如何更好地經營小紅書帳號。隨著社群媒體的發展，許多人發現自己需要管理多個社群帳號。對於小紅書用戶來說，這也是一個挑戰。一些小紅書帳號管理軟體可以幫助使用者更輕鬆地管理多個帳號，包括自動發佈內容、定時發布、資料分析等功能。透過這些工具，使用者可以更有效率地管理他們的帳號，提高帳號的曝光率和關注。另一、小紅書帳號管理軟體有

什麼是Discuz？ Discuz的定義與功能介紹 Mar 03, 2024 am 10:33 AM

《探索Discuz：定義、功能及程式碼範例》隨著網路的快速發展，社群論壇已成為人們獲取資訊、交流觀點的重要平台。在眾多的社群論壇系統中，Discuz作為國內較知名的一種開源論壇軟體，備受廣大網站開發者和管理員的青睞。那麼，什麼是Discuz？它又有哪些功能，能為我們的網站提供怎樣的幫助呢？本文將對Discuz進行詳細介紹，並附上具體的程式碼範例，幫助讀者更

PHP技巧：快速實現返回上一頁功能 Mar 09, 2024 am 08:21 AM

PHP技巧：快速實現回到上一頁功能在網頁開發中，常常會遇到需要實作返回上一頁的功能。這樣的操作可以提高使用者體驗，讓使用者更方便地在網頁之間進行導航。在PHP中，我們可以透過一些簡單的程式碼來實現這項功能。本文將介紹如何快速實現返回上一頁功能，並提供具體的PHP程式碼範例。在PHP中，我們可以使用$_SERVER['HTTP_REFERER']來取得上一頁的URL

Linux下GDM的功能與作用詳解 Mar 01, 2024 pm 04:18 PM

Linux下GDM的功能和作用詳解在Linux作業系統中，GDM（GNOMEDisplayManager）是一種圖形化登入管理器，它提供了使用者在系統中登入和登出的介面。 GDM通常是GNOME桌面環境的一部分，但也可以被其他桌面環境所使用。 GDM的功能不僅是提供一個登入介面，還包括使用者會話管理、螢幕保護、自動登入等功能。 GDM的功能主要包括以下幾個面向：

See all articles

javascript如何實現電腦和手機版樣式切換功能

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題