「前篇」JavaScript如何獲取一個元素的樣式信息

2021-01-07 51CTO
「前篇」JavaScript如何獲取一個元素的樣式信息

關於JavaScript如何獲取一個元素的所有樣式值，及設置一個元素的樣式值，所有相關知識點，看這兩篇夠了。其實現代碼說難不難，說容易吧，這其中還真有一些需要特別清楚的地方，今天，我這裡給大家簡單聊聊，將需要注意的地方全部捋出來。

作者：小鄭搞碼事來源：今日頭條|2018-11-08 16:18

關於JavaScript如何獲取一個元素的所有樣式值，及設置一個元素的樣式值，所有相關知識點，看這兩篇夠了。記住了，都很簡單的。來來來...

想要獲取一個元素的一個或者多個CSS樣式設置，這應該是搞前端的都碰到過的一件事。如果你平時用JavaScript實現過一些動畫效果什麼的。肯定就會知道一個問題：元素內聯樣式和動態設置的樣式容易獲取，但默認樣式表設置的及用戶代理默認設置的樣式獲取比較費勁。

其實現代碼說難不難，說容易吧，這其中還真有一些需要特別清楚的地方，今天，我這裡給大家簡單聊聊，將需要注意的地方全部捋出來。

下面的講解用這個例子：

上面這個例子很簡單，看這篇文章的人沒有看不懂的，一個ID值為elem的DOM元素具有內聯樣式和樣式表設置的默認樣式。下面開始講重點

獲取內聯和動態設置的樣式

獲取內聯和動態設置的樣式方式有兩種

1. 直接訪問元素的style屬性

2. 使用getAttribute方法

一. 證明二者都無法獲得樣式表設置的樣式

有些結論可能好多人沒有證實過，模模糊糊。比如，上面提到的這兩種方式是否可以獲取樣式表設置的樣式，如font-size/background-color等。

var elem = document.getElementById('elem') console.log(elem.style.fontSize) // 無輸出 console.log(elem.getAttribute('style')) // 輸出：height:30px; width:150px; 

二. 方式一需要注意的地方

直接訪問style對象的方式必須使用一種特殊的語法。

不帶連字符的屬性值，如width，可以直接訪問。

elem.style.width 

帶連字符的屬性值，需要使用駱駝表示法。如background-color

elem.style.backgroundColor 

三. 方式二需要注意的地方

使用方法來訪問style對象，然而你必須從字符串中解析出來。

使用setAttribute設置樣式時，之前動態樣式和內聯樣式都會被重置。這一點也很好理解。因為它設置的是style。

當然，使用getAttribute來訪問style屬性的時候，IE7也會返回一個對象，而不是帶有CSS值的一個字符串。

來簡單總結一下

上面說了兩種獲取動態樣式和內聯樣式的方式及一些需要注意的地方。下一篇我來講一下如何使用一種跨瀏覽器方式同時獲取內聯樣式，動態設置樣式，用戶代理以及樣式表設置的樣式。也是常用的一種方式。還有各自獲取的優先級。

【責任編輯：龐桂玉 TEL：（010）68476606】

點讚 0

相關焦點

  • 「後篇」JavaScript如何獲取一個元素的樣式信息
    「後篇」JavaScript如何獲取一個元素的樣式信息 上一篇講了兩種獲取樣式的方式。這兩種方法都沒法獲取用戶代理或者樣式表設置的樣式值。今天我來講一種跨瀏覽器的方式來獲取所有的與DOM相關的樣式值。
  • javascript的樣式 - CSDN
    使頁面高效和快速的另一種方法是直接向樣式表中動態添加和刪除樣式，而不是不斷向DOM查詢元素和應用樣式。 運作方式如下！ 獲取樣式表 (Getting the Stylesheet)Which stylesheet you add the rules to is up to you.
  • 「美少女戰士Sailor Moon Eternal」前篇特別影像公開
    「美少女戰士Sailor Moon Eternal」前篇特別影像公開 動漫 178動漫整編 ▪
  • 動畫「亂步奇譚」PV公開!第一話「人間椅子 前篇」簡介
    動畫「亂步奇譚」PV公開！第一話「人間椅子 前篇」簡介 動漫 178動漫頻道 ▪ 2015-06-26 11:45:54
  • 掌握如下方法,輕鬆在Html DOM中通過JavaScript查找Html元素
    通過JavaScript代碼，可以修改Html元素中的CSS樣式，從而可以改變整個頁面的樣式風格，如修改頁面的背景色，字體的大小和顏色等。通過JavaScript代碼，可以讓頁面上的按鈕產生事件，這樣按鈕就變的具有生動性，單擊按鈕可以做出反應。
  • javascript 元素獲取焦點專題及常見問題 - CSDN
    這並不是最有意思的地方，最有意思的地方是他可以觸發該元素的  相應  事件；接下來來舉個慄子：　　　　　　　&input type="text" id="name"/> <button id="btn">點擊獲取焦點
  • 原生JavaScript的DOM操作匯總
    點擊上面「天碼營」，加入我們，快速成長~「內容簡介」JavaScript的DOM操作也是面試中的常見問題
  • CSS樣式「程式設計師培養之路第六天」
    早期的網頁沒有css樣式，為了界面美觀，很多元素自帶margin、padding等樣式，但這些樣式在不同瀏覽器解析的值都不一樣，需要將css樣式重置，保證在不同瀏覽器顯示一致。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於原位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
  • 「學習筆記」HTML基礎
    💪💪開始充電之旅啦~~~一、認識WEB「網頁」主要是由文字、圖像和超連結等元素構成，當然除了這些元素，網頁中還可以包括音頻、視頻以及Flash等。「瀏覽器」是網頁顯示、運行的平臺。「HTML標籤關係」如果兩個標籤之間的關係是嵌套關係，子元素最好縮進一個tab鍵的身位（一個tab是4個空格）。
  • 使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口
    一般用於給用戶一個提示信息，必須關閉模態窗口之後才可以進行其它的操作。圖1圖1就是一個使用DIV+CSS自定義的一個模態窗口，其優點是個性化強，根據系統要求完全自行設計，而系統窗口是無法做到的。position屬性可以設置不同的定位方式，任何元素都可以定位。絕對定位：是指針對瀏覽器的窗口位置對模態窗口進行定位，固定在一個位置，不會被其它的元素影響。相對定位：是指模態窗口的位置相對於其它元素而進行定位，會受到其它元素的影響。
  • 何謂Word樣式,如何使用樣式?都在這裡了!
    現在開始培養「樣式」意識，學會把活交給 Word 哥！如何使用【樣式】下面以編輯一份名為「Office 365 簡介」的長文檔為例介紹「樣式」的用法：❶ 對文檔標題「Office 365 簡介」應用「標題」樣式。
  • 我們如何獲取信息,組織知識
    ，所以結合其部分觀點，談談對於信息獲取和知識組織的看法。我們是如何獲取知識的我們通過觀察、抽象（如定義詞等）、建立模型、歸納推理和演繹推理等方式，形成了關於世界如何運作的複雜信念，然後將其通過「詞彙」在我們腦子裡建立節點，形成一個彼此相連的網絡。所以有些時候你會發現不同的語言之間確實很難翻譯，因為這些詞彙背後的「語境」需要很多文化背景才能解釋。
  • 如何通過JavaScript獲取搜尋引擎搜索關鍵詞
    獲取頁面的搜尋引擎搜索關鍵詞要想獲取當前頁面的搜尋引擎搜索關鍵詞，首先要獲取到當前頁面的來源地址，我們可以通過document.referrer來獲得。本文將通過JavaSvript來獲取當前頁面的搜索關鍵詞來源。網上找了非常多，但是感覺都沒用。想實現一個用戶通過百度搜索某個關鍵詞，然後讓網頁上顯示出 用戶搜索的那個關鍵詞。
  • 14 個你可能不知道的 JavaScript 調試技巧
    var animals = [    { animal: 'Horse', name: 'Henry', age: 43 },    { animal: 'Dog', name: 'Fred', age: 13 },    { animal: 'Cat', name: 'Frodo', age: 18 }];
  • Axure高階教程:利用JavaScript製作實時天氣顯示APP
    那麼有沒有一種方法，讓我們製作的原型也能獲取到真實數據呢？本例通過JavaScript實現實時獲取天氣功能，意在激發大家興趣，製作更多基於Axure獲取實時信息的案例。廢話不多說，上圖為敬：這個原型到底有什麼獨特之處嗎？
  • javascript中使用a標籤獲取當前目錄的絕對路徑方法
    javascript中使用a標籤獲取當前目錄的絕對路徑方法 這篇文章主要介紹了javascript中使用a標籤獲取當前目錄的絕對路徑方法,本文講解的方法比較特別,需要的朋友可以參考下 作者：來源：站長網|2015-03-30 15:45
  • WebAPI基礎操作DOM元素改變網頁內容樣式入門詳解
    獲取事件源 ，2.綁定事件 ，3.添加事件處理程序 (相應的函數處理邏輯) ，獲取元素我們已經說過了 ，如果想要給某個元素加特效 ，就必須先獲取這個元素 ，然後我們要明白 ，我們要給這個元素添加什麼特效 ，是點擊 ，還是拖拽讓他發生變化現在讓我們具體來看看 ，如何去操作元素 ，讓我們已經獲取到的元素發生改變 ，注意所有的DOM操作都必須有三個步驟如何利用DOM改變元素的內容
  • JavaScript是什麼
    面向過程的思想----C語言【指針】面向對象的思想就是只需要知道開始和結束位置就可以，至於中間是如何完成的不需要關注。開始和結束位置就是對象。面向對象的思想—java、 C#腳本—寫好的程序不需要中間轉換，就能立即在運行環境中運行。javaScript，SQL為html網頁提供動態效果【特效】。
  • 第八篇:jQuery的使用及元素選擇器
    Type屬性是腳本文件類型，一般是javascript類型。$("#id_btn")是jQuery選擇器，用於獲取id值為」id_btn」的DOM元素，然後綁定click事件。從jQuery案例代碼可以看出，使用jQuery簡化了DOM元素的選取和事件的綁定操作。
  • 如何在 JavaScript 中等分數組
    在本教程中，我們來學習一下如何使用Array.splice()方法將數組等分，還會講一下，Array.splice() 和 Array.slice() 它們之間的不同之處。1.另請注意，在上述情況下，元素數為偶數，如果元素數為奇數，則前一半將有一個額外的元素。