cssRules 屬性
此屬性可以返回指定樣式表中的規則集合。
首先搞清楚一個問題,什麼是規則,看如下程式碼片段:
[HTML] 純文字檢視 複製程式碼<style type="text/css"> div { text-align:center; background-color:red; } #ant { width:300px; height:100px; line-height:100px; } </style>
通過style定義樣式表,然後利用元素選擇器和id選擇器定義兩個規則。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let CSSRuleList = CSSStyleSheet.cssRules
瀏覽器支援:
(1).IE9+瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).火狐瀏覽器支援此屬性。
(5).opera瀏覽器支援此屬性。
(6).safria瀏覽器支援此屬性。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { text-align:center; background-color:red; } #ant { width:300px; height:100px; line-height:100px; } </style> <script> window.onload = function () { let odiv = document.getElementById("ant"); let obt = document.getElementById("bt"); let styleSheet = document.styleSheets[0]; console.log(styleSheet.cssRules) } </script> </head> <body> <div id="ant"></div> </body> </html>
程式碼執行效果截圖如下:
通過cssRules屬性獲取樣式表物件中所有的規則。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { text-align:center; background-color:#ccc; font-size:12px; } #ant { width:300px; height:100px; } </style> <script> window.onload = function () { let odiv = document.getElementById("ant"); let obt = document.getElementById("bt"); let styleSheet = document.styleSheets[0]; obt.onclick = function () { odiv.innerHTML = styleSheet.cssRules[0].cssText; } } </script> </head> <body> <div id="ant"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
程式碼執行效果截圖如下:
cssRules返回的是一個規則集合,通過索引可以獲取指定位置的規則。
通過cssText屬性可以獲取具體的規則內容。
相關文章
- iOS動畫 屬性屬性解析iOS動畫
- CSS 屬性篇(七):Display屬性CSS
- JavaScript私有屬性和靜態屬性JavaScript
- CSS字型屬性和文字屬性詳解CSS
- 私有屬性
- allowfullscreen 屬性
- background 屬性
- cssText 屬性CSS
- translucent屬性
- parentStyleSheet屬性
- background屬性
- jQuery 屬性jQuery
- 屬性動畫動畫
- jQuery屬性jQuery
- TextView屬性TextView
- XML屬性XML
- Property屬性
- Python - 物件導向程式設計 - 公共屬性、保護屬性、私有屬性Python物件程式設計
- CAD屬性編輯操作——物件屬性教程物件
- WPF 之 依賴屬性與附加屬性(五)
- jQuery設定disabled屬性與移除disabled屬性jQuery
- Python 類的屬性與例項屬性Python
- python物件屬性管理(2):property管理屬性Python物件
- 框架(frameset),全域性屬性框架
- js如何獲取給定屬性的屬性值JS
- Blob type 屬性
- Blob size 屬性
- JavaScript files 屬性JavaScript
- URL hostname 屬性
- URL pathname 屬性
- URL password 屬性
- URL hash 屬性
- File name 屬性
- FileList length 屬性
- File size 屬性
- File type 屬性
- File lastModified 屬性AST
- URL href 屬性