javascript 讀取內聯之外的樣式(style、currentStyle、getComputedStyle區別介紹) (轉載)

来源:http://www.cnblogs.com/zhengsha/archive/2016/01/06/5105948.html
-Advertisement-
Play Games

樣式表有三種方式:內嵌樣式(inline Style) :是寫在Tag裡面的,內嵌樣式只對所有的Tag有效。 (也稱作“內聯樣式”)內部樣式(internal Style Sheet):是寫在HTML的裡面的,內部樣式只對所在的網頁有效。外部樣式表(External Style Sheet):如果很...


 

樣式表有三種方式:

內嵌樣式(inline Style) :是寫在Tag裡面的,內嵌樣式只對所有的Tag有效。   (也稱作“內聯樣式”)

內部樣式(internal Style Sheet):是寫在HTML的裡面的,內部樣式只對所在的網頁有效。

外部樣式表(External Style Sheet):如果很多網頁需要用到同樣的樣式(Styles),將樣式(Styles)寫在一個以.css為尾碼的CSS文件里,然後在每個需要用到這些樣式(Styles)的網頁里引用這個CSS文件。

 

最常用的是style屬性,在JavaScript中,通過document.getElementById(id).style.XXX就可以獲取到XXX的值,但意外的是,這樣做只能取到通過內嵌方式設置的樣式值,即style屬性裡面設置的值。

 

解決方案:引入currentStyle,runtimeStyle,getComputedStyle style 標準的樣式,可能是由style屬性指定的!

runtimeStyle 運行時的樣式!如果與style的屬性重疊,將覆蓋style的屬性!

currentStyle 指 style 和 runtimeStyle 的結合! 通過currentStyle就可以獲取到通過內聯或外部引用的CSS樣式的值了(僅限IE) 如:document.getElementById("test").currentStyle.top

要相容FF,就得需要getComputedStyle 出馬了

註意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如說

<style>
#mydiv {
     width : 300px;
}
</style>

則:

複製代碼
var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
      var width = mydiv.currentStyle['width'];
      alert('ie:' + width);
} else if(window.getComputedStyle) {
      var width = window.getComputedStyle(mydiv , null)['width'];
      alert('firefox:' + width);
}
複製代碼

另外在FF下還可以通過下麵的方式獲取

document.defaultView.getComputedStyle(mydiv,null).width;
window.getComputedStyle(mydiv , null).width;

備註: null參數設置:after,:before之類的偽類,如果不用偽類的話設置為null即可

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何獲取當前設備的系統版本!!![[[UIDevice currentDevice] systemVersion] floatValue]獲取App版本NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; // ...
  • 第六章 Android的Drawable Drawable的優點:使用簡單,比自定義view的成本要低;非圖片類型的Drawable占用空間小,有利於減小APK安裝包的大小。 6.1Drawable簡介 Drawable有很多種,他們都表示一種圖像的概念,Drawable常被用來...
  • 一、部分快捷鍵。這個在網上有一大堆,不過筆者認為,還是應該看個人習慣和使用環境吧。如果用得順手,那就是快捷鍵,如果用得不順手,那應該稱其為“輔助鍵”吧。下麵介紹幾個常用的快捷鍵:1.截圖。屏幕部分畫面:command+ Shift + 4保存格式為(.png),路徑是在桌面上面,所以截圖完就在桌面上...
  • 在控制器裡面想調用一個視圖的子視圖的代理方法很簡單1.找到子視圖的協議和代理屬性2.給你想調用的控制項添加代理屬性,遵守的協議和子視圖的一樣3.重寫代理屬性的set方法
  • 拿到設計圖使用markdown標好尺寸、字體大小和顏色等,但是是什麼字體我還不知道如何判斷,估計還得問設計師吧!這是一張手機端的html5網頁,一般考慮適應webkit內核,還有就是需要設置meta標記防止縮放、自適應等,代碼如下:寬度為設備寬度,初始化縮放比為1,最小縮放比為1,不能縮放。由於看到...
  • [1]引用 [2]特性 [3]屬性 [4]方法
  • Senna.js 是一個速度超快的單頁應用程式引擎,提供了幾個低級別的API,可以幫助你打造現代化的基於 Web 的應用程式。更重要的是,搜索引擎蜘蛛應該能夠索引相同的內容。通過使用 HTML5 History API,我們可以操縱使用 pushState,replaceState 和 popSta...
  • 純靜態頁面,不依賴伺服器端腳本,從一個靜態頁面傳遞給另一個靜態頁面,大致有這三種實現方案:1.通過url ?後面的參數傳 www.xxx.com/xxx.html?key=value&&key2=value2通過js,locaton.search獲取2.通過cookiejs設置cookie,另一個頁...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...