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

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

上一篇講了兩種獲取樣式的方式。這兩種方法都沒法獲取用戶代理或者樣式表設置的樣式值。今天我來講一種跨瀏覽器的方式來獲取所有的與DOM相關的樣式值。

作者:小鄭搞碼事來源:今日頭條|2018-11-09 10:50

上一篇講了兩種獲取樣式的方式。

1. 通過直接訪問style對象

2. 通過方法getAttribute

這兩種方法都沒法獲取用戶代理或者樣式表設置的樣式值。今天我來講一種跨瀏覽器的方式來獲取所有的與DOM相關的樣式值。

一. 跨瀏覽器方法

currentStyle對象是一個特定於IE的對象。它包含了一個元素的所有支持的和可用的CSS屬性的一個集合。它期待駱駝表示 格式的一個值 。

比如:fontFamily而不是font-family

所以,這裡,如果是支持這個對象的瀏覽器調用的話,就使用CSSPROP。

從代碼中,可以看出,其它瀏覽器,使用的是window.getComputedStyle方法。該方法也可以通過document.defalutView.getComputedStyle來訪問。這個方法接受兩個參數,元素和一個偽元素,後者通常為空(或者一個空字符串"")。

二. 獲取屬性的優先級

竟然是能獲取所有與DOM相關的樣式屬性,那必然有一個優先級的問題。

<style>  #elem{font-size:23px;} </style> <input id ="elem" style="font-size:18px;"/> elem.style.fontSize = '12px'; console.log(getStyle(elem, "fontSize", "font-size")) // 輸出12px 

當在幾處同時設置一個屬性時,getStyle方法獲取永遠是那個起使用的,這一點要高度關注。

getStyle取值的優先級是:

1. 動態設置的

2. 內聯設置的

3. 樣式表設置的

4. 瀏覽器默認設置的

【責任編輯:

龐桂玉

TEL:(010)68476606】

點讚 0

相關焦點

  • 「前篇」JavaScript如何獲取一個元素的樣式信息
    「前篇」JavaScript如何獲取一個元素的樣式信息 關於JavaScript如何獲取一個元素的所有樣式值,及設置一個元素的樣式值,所有相關知識點,看這兩篇夠了。其實現代碼說難不難,說容易吧,這其中還真有一些需要特別清楚的地方,今天,我這裡給大家簡單聊聊,將需要注意的地方全部捋出來。
  • javascript的樣式 - CSDN
    使頁面高效和快速的另一種方法是直接向樣式表中動態添加和刪除樣式,而不是不斷向DOM查詢元素和應用樣式。 運作方式如下! 獲取樣式表 (Getting the Stylesheet)Which stylesheet you add the rules to is up to you.
  • 第八篇:jQuery的使用及元素選擇器
    Type屬性是腳本文件類型,一般是javascript類型。$("#id_btn")是jQuery選擇器,用於獲取id值為」id_btn」的DOM元素,然後綁定click事件。從jQuery案例代碼可以看出,使用jQuery簡化了DOM元素的選取和事件的綁定操作。
  • 原生JavaScript的DOM操作匯總
    點擊上面「天碼營」,加入我們,快速成長~「內容簡介」JavaScript的DOM操作也是面試中的常見問題
  • 「學習筆記」HTML基礎
    ✨✨    本篇文章主要由五個章節構成,從WEB標準到初識HTML,接著學習HTML常用標籤,最後學習表格列表和表單。💪💪開始充電之旅啦~~~一、認識WEB「網頁」主要是由文字、圖像和超連結等元素構成,當然除了這些元素,網頁中還可以包括音頻、視頻以及Flash等。
  • 掌握如下方法,輕鬆在Html DOM中通過JavaScript查找Html元素
    通過JavaScript代碼,可以修改Html元素中的CSS樣式,從而可以改變整個頁面的樣式風格,如修改頁面的背景色,字體的大小和顏色等。通過JavaScript代碼,可以讓頁面上的按鈕產生事件,這樣按鈕就變的具有生動性,單擊按鈕可以做出反應。
  • javascript 元素獲取焦點專題及常見問題 - CSDN
    這並不是最有意思的地方,最有意思的地方是他可以觸發該元素的  相應  事件;接下來來舉個慄子:       &input type="text" id="name"/> <button id="btn">點擊獲取焦點
  • CSS樣式「程式設計師培養之路第六天」
    早期的網頁沒有css樣式,為了界面美觀,很多元素自帶margin、padding等樣式,但這些樣式在不同瀏覽器解析的值都不一樣,需要將css樣式重置,保證在不同瀏覽器顯示一致。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來),然後相對於原位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動。
  • 何謂Word樣式,如何使用樣式?都在這裡了!
    現在開始培養「樣式」意識,學會把活交給 Word 哥!如何使用【樣式】下面以編輯一份名為「Office 365 簡介」的長文檔為例介紹「樣式」的用法:❶ 對文檔標題「Office 365 簡介」應用「標題」樣式。
  • javascript中使用a標籤獲取當前目錄的絕對路徑方法
    javascript中使用a標籤獲取當前目錄的絕對路徑方法 這篇文章主要介紹了javascript中使用a標籤獲取當前目錄的絕對路徑方法,本文講解的方法比較特別,需要的朋友可以參考下 作者:來源:站長網|2015-03-30 15:45
  • 我們如何獲取信息,組織知識
    ,所以結合其部分觀點,談談對於信息獲取和知識組織的看法。我們是如何獲取知識的我們通過觀察、抽象(如定義詞等)、建立模型、歸納推理和演繹推理等方式,形成了關於世界如何運作的複雜信念,然後將其通過「詞彙」在我們腦子裡建立節點,形成一個彼此相連的網絡。所以有些時候你會發現不同的語言之間確實很難翻譯,因為這些詞彙背後的「語境」需要很多文化背景才能解釋。
  • Javascript DOM基礎操作:樣式與事件(下)
    上兩篇介紹了DOM的概念以及一些DOM控制HTML標籤的查增刪改的基礎操作,這些是不夠的,因為我們的目的是讓頁面有顏值有靈魂(好看以及有趣的行為),這就需要通過CSS樣式和事件處理來體現。改變CSS樣式HTML 元素的樣式是通過style屬性和對應的屬性值來控制的,DOM允許js可以操控style的屬性和屬性值,從而來達到改變其樣式的目的。當然,改變樣式的前提依然是要先獲取到目標元素,然後通過點操作符來找到style屬性和屬性值。
  • 如何通過JavaScript獲取搜尋引擎搜索關鍵詞
    獲取頁面的搜尋引擎搜索關鍵詞要想獲取當前頁面的搜尋引擎搜索關鍵詞,首先要獲取到當前頁面的來源地址,我們可以通過document.referrer來獲得。取到來源URL地址後,可以根據&進行數據拆分,拆分出一共有多少個參數,然後再根據=獲得參數的值。本文將通過JavaSvript來獲取當前頁面的搜索關鍵詞來源。網上找了非常多,但是感覺都沒用。想實現一個用戶通過百度搜索某個關鍵詞,然後讓網頁上顯示出 用戶搜索的那個關鍵詞。
  • 12 個 GitHub 上超火的 JavaScript 奇技淫巧項目,找到寫 JavaScript 的靈感!
    平時如何發現好的開源項目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目以下為【前端GitHub】的第 12 期精華內容。new Number() 是一個對象而不是 number,因此返回 false。https://github.com/lydiahallie/javascript-questions4. JavaScript 30
  • 使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口
    一般用於給用戶一個提示信息,必須關閉模態窗口之後才可以進行其它的操作。圖1圖1就是一個使用DIV+CSS自定義的一個模態窗口,其優點是個性化強,根據系統要求完全自行設計,而系統窗口是無法做到的。position屬性可以設置不同的定位方式,任何元素都可以定位。絕對定位:是指針對瀏覽器的窗口位置對模態窗口進行定位,固定在一個位置,不會被其它的元素影響。相對定位:是指模態窗口的位置相對於其它元素而進行定位,會受到其它元素的影響。
  • 第五篇:JavaScript事件處理
    當HTML元素與用戶發生交互行為時,該元素會觸發相關的交互事件,例如:當用戶用滑鼠單擊網頁中的按鈕時,按鈕會觸發滑鼠單擊事件(onclick)。元素自身也會觸發事件,例如:當圖片元素加載完成後,會觸發加載完成事件(onload)。
  • 14 個你可能不知道的 JavaScript 調試技巧
    var animals = [    { animal: 'Horse', name: 'Henry', age: 43 },    { animal: 'Dog', name: 'Fred', age: 13 },    { animal: 'Cat', name: 'Frodo', age: 18 }];
  • 如何利用每天下班後的「黃金時間」?
    也許就是每天下班後,兩三個小時的時間積累。那麼,作為上班族,如果你不想讓自己掉隊,可以在每天的這段「黃金時間」裡,做些什麼,來提升價值呢?下面,介紹幾種做法,僅供參考。: )1. 內化信息我們在每天的工作和生活中,會接觸到大量的信息。
  • 疫情下AI獲客正當時:銷售轉化率超3倍,寫內容「秒變千篇」
    另外,傳統的方式獲客線索有限,獲取信息效率較低;陌生人拜訪往往很難一次建立信任,成單概率較低。AI 能否以「非接觸」的方式,提升銷售人員的效率與成單效果呢?百鍊智能正是以「智能獲客」為目標的一家創業公司。
  • 14個你可能不知道的JavaScript調試技巧
    如何快速找到 DOM 元素在 Elements 面板中標記一個 DOM 元素,並在控制臺中使用它。Chrome 控制臺會保留選擇歷史的最後五個元素,最終選擇的首個元素被標記為 $0,第二個選擇的元素為 $1,依此類推。