深入理解腳本化CSS系列第四篇——腳本化樣式表

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/09/07/5848335.html
-Advertisement-
Play Games

× 目錄 [1]CSSStyleSheet [2]CSSRule 前面的話 關於腳本化CSS，查詢樣式時，查詢的是計算樣式；設置單個樣式時，設置的是行間樣式；設置多個樣式時，設置的是CSS類名。腳本化樣式表當然也是一種腳本化CSS的技術，雖然不經常使用，但有時卻非常有用。下麵將詳細介紹腳本化樣式表的 ...


×
目錄
[1]CSSStyleSheet [2]CSSRule

前面的話

　　關於腳本化CSS，查詢樣式時，查詢的是計算樣式；設置單個樣式時，設置的是行間樣式；設置多個樣式時，設置的是CSS類名。腳本化樣式表當然也是一種腳本化CSS的技術，雖然不經常使用，但有時卻非常有用。下麵將詳細介紹腳本化樣式表的內容

 

CSSStyleSheet

　　CSSStyleSheet類型表示的是樣式表。我們知道，引入CSS一共有3種方式，包括行間樣式、內部樣式和外部樣式。其中，內部樣式和外部樣式分別通過<style>和<link>標簽以樣式表的形式引入，屬於CSSStyleSheet類型

 

styleSheet

　　CSSStyleSheet對象只是一個類數組對象，它繼承自Stylesheet

　　樣式表CSSStyleSheet是通過document.styleSheets集合來表示的。通過集合的length屬性可以獲知樣式表的數量，而通過方括弧語法或item()方法可以訪問毎一個樣式表

<style id="styleIn1"></style>

<script>
console.log(document.styleSheets[0] instanceof StyleSheet);//true
console.log(document.styleSheets[0] instanceof CSSStyleSheet);//true
</script>
<style id="styleIn1"></style>
<link id="styleOut" rel="stylesheet" href="style.css">
<style id="styleIn2"></style>

<script>
console.log(document.styleSheets.length);//3
//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: "text/css", href: null…}
console.log(document.styleSheets[0]);
//CSSStyleSheet {ownerRule: null, cssRules: null, rules: null, type: "text/css", href: "file:///C:/inetpub/wwwroot/style.css"…}
console.log(document.styleSheets[1]);
</script>

 

引入

　　除了使用document.styleSheets，還可以通過<link>或<style>元素的sheet屬性，取得CSSStyleSheet對象

　　[註意]IE8-瀏覽器不支持

<style id="test"></style>

<script>
//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: "text/css", href: null…}
console.log(test.sheet);
console.log(test.sheet=== document.styleSheets[0]);//true
</script>

　　IE10-瀏覽器支持<link>或<style>元素的styleSheet屬性，來取得CSSStyleSheet對象

<style id="test"></style>

<script>
//[object CSSStyleSheet]
console.log(test.styleSheet);
</script>

相容　

function getSheet(element){
    return element.sheet || element.styleSheet;
}

 

繼承屬性

　　從Stylesheet介面繼承而來的屬性如下

【1】disabled

　　disabled表示樣式表是否被禁用的布爾值。這個屬性是可讀/寫的，將這個值設置為true可以禁用樣式表

<style id="styleIn1">
#test{background-color: red!important;}
</style>

<div id="test" style="width: 100px;height: 100px;background-color: black;"></div>
<button id="btn1">變色</button>
<script>
btn1.onclick = function(){
    document.styleSheets[0].disabled = !document.styleSheets[0].disabled;
}
</script>

【2】href

　　如果樣式表是通過<link>包含的，則表示樣式表的URL；否則，是null

<style id="styleIn1"></style>
<link id="styleOut" rel="stylesheet" href="style.css">

<script>
console.log(document.styleSheets[0].href);//null
//file:///C:/inetpub/wwwroot/style.css
console.log(document.styleSheets[1].href);
</script>

【3】media

　　media屬性表示當前樣式表支持的所有媒體類型的集合MediaList。與所有DOM集合一樣，這個集合也有一個length屬性和一個item()方法。也可以使用方括弧語法取得集合中特定的項。如果集合是空列表，表示樣式表適用於所有媒體。在IE8-瀏覽器中，media是一個反映<link>和<style>元素media特性值的字元串

<style media="all and (min-width:100px)">
.box{height: 100px;width: 100px;background-color: pink;}
</style>

<script>
//IE8-瀏覽器返回'all and (min-width:100px)'
//其他瀏覽器返回MediaList [ "all and (min-width: 100px)" ]
console.log(document.styleSheet[0].media);
</script>

【4】ownerNode

　　ownerNode屬性返回StyleSheet對象所在的DOM節點，通常是<link>或<style>。如果當前樣式表是其他樣式表通過@import導入的，則這個屬性值為null

　　[註意]IE8-瀏覽器不支持這個屬性

<style id="test"></style>
<script>
//<style id="test"></style>，IE8-瀏覽器返回undefined
console.log(document.styleSheets[0].ownerNode);
</script>

【5】parentStyleSheet

　　parentStyleSheet表示在當前樣式表是通過@import導入的情況下，這個屬性是一個指嚮導入它的樣式表的指針；否則為null

<style id="test"></style>
<script>
console.log(document.styleSheets[0].parentStyleSheet);//null
</script>

【6】title

　　title屬性表示ownerNode中title屬性的值

<style title="test"></style>
<script>
console.log(document.styleSheets[0].title);//test
</script>

【7】type

　　type屬性表示樣式表類型的字元串。對CSS樣式表而言，這個字元串是"type/css"

<style type="text/css"></style>
<script>
console.log(document.styleSheets[0].type);//'text/css'
</script>

　　[註意]若省略type屬性，預設為'text/css'，但IE8-瀏覽器輸出''

<style></style>
<script>
//IE8-瀏覽器輸出''，其他瀏覽器輸出'text/css'
console.log(document.styleSheets[0].type);
</script>

【8】cssText

　　cssText屬性返回樣式表中所有樣式的字元串表示，該屬性可讀寫，常常用於動態樣式的IE瀏覽器相容處理，詳細情況移步至此

　　[註意]該屬性只有IE瀏覽器支持

<style id="test">
.box{height: 100px;}
div{height: 100px;}
</style>
<script>
var sheet = test.sheet || test.styleSheet;
//IE瀏覽器返回'.box{height: 100px;} div{height: 100px;}'
//firefox瀏覽器報錯
//其他瀏覽器返回undefined
console.log(sheet.cssText);
</script>

　　上面8個屬性中，除了disabled屬性和cssText屬性之外，其他屬性都是只讀的

 

自有屬性和方法

【1】cssRules

　　cssRules屬性表示樣式表中包含的樣式規則的集合

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>
<script>
//CSSRuleList {0: CSSStyleRule, length: 1}
console.log(document.styleSheets[0].cssRules);
</script>

　　IE8-瀏覽器不支持cssRules屬性，但有一個類似的rules屬性

　　[註意]firefox不支持rules屬性

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>
<script>
//CSSRuleList {0: CSSStyleRule, length: 1}
console.log(document.styleSheets[0].rules);
</script>

相容

function rules(sheet){
    return sheet.cssRules || sheet.rules;
}

【2】ownerRule

　　如果樣式表是通過@import導入的，ownerRule屬性就是一個指針，指向表示導入的規則；否則，值為null

　　[註意]IE8-瀏覽器不支持這個屬性

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
console.log(document.styleSheets[0].ownerRule);//null
</script>

　　CSSStyleSheet對象的方法包括insertRule()、addRule()、deleteRule()和removeRule()，都用於操作CSSRule對象。於是把它們放在CSSRule對象的部分進行介紹

 

CSSRule對象

　　CSSRule對象表示樣式表中的每一條規則。實際上，CSSRule是一個供其他多種類型繼承的基類型，其中最常見的就是CSSStyleRule類型，表示樣式信息。其他規則還包括@import、@font-face、@page和@charset

　　CSSRule對象的列表通過CSSStyleSheets對象的cssRules屬性或ruls屬性得到

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
//CSSStyleRule {selectorText: ".box", style: CSSStyleDeclaration, type: 1, cssText: ".box { height: 100px; width: 100px; background-color: pink; }", parentRule: null…}
console.log(document.styleSheets[0].cssRules[0] || document.styleSheets[0].rules[0]);
</script>

 

屬性

　　CSSStyleRule對象包含下列屬性

【1】cssText

　　cssText屬性返回整條規則對應的文本

　　[註意]IE8-瀏覽器不支持

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules|| sheet.rules;
//'.box { height: 100px; width: 100px; background-color: pink; }'
console.log(rules[0].cssText);
</script>

【2】style

　　style屬性返回一個CSSStyleDeclaration對象，通過它設置和取得規則中特定的樣式值

　　這個CSSStyleDeclaration對象與行內元素的style屬性的CSSStyleDeclaration對象類似，具有相似的屬性和方法，詳細情況移步至此

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules || sheet.rules;
//CSSStyleDeclaration {0: "height", 1: "width", 2: "background-color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}
console.log(rules[0].style);

/*[註意]style屬性下在cssText與CSSStyleRule對象下的cssText屬性不同 ，前者只報包含樣式信息，後者還包含選擇符文本和圍繞樣式信息的花括弧*/

//'height: 100px; width: 100px; background-color: pink;'
console.log(rules[0].style.cssText)
//'.box { height: 100px; width: 100px; background-color: pink; }'
console.log(rules[0].cssText)
</script>

【3】selectorText

　　selectorText屬性返回當前規則的選擇符文本

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules|| sheet.rules;
console.log(rules[0].selectorText);//'.box'
</script>

【4】parentRule

　　如果當前規則是導入的規則，這個屬性引用的就是導入規則；否則，這個值為null

　　[註意]IE8-瀏覽器不支持

<style id="test">
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<script>
var sheet = test.sheet || test.styleSheet;
var rules = sheet.cssRules|| sheet.rules;
console.log(rules[0].parentRule);//null
</script>

【5】parentStyleSheet

　　parentStyleSheet屬性表示當前規則所屬的樣式表

　　[註意]IE8-瀏覽器不支持

<style>
.box{width: 100px;height: 100px;background-color:pink;}
</style>
<script>
var rules = document.styleSheets[0].cssRules|| document.styleSheets[0].rules;
//CSSStyleSheet {ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, type: "text/css", href: null…}
console.log(rules[0].parentStyleSheet);
</script>

【6】type

　　type屬性返回有一個整數值，表示當前規則的類型

　　[註意]IE8-瀏覽器不支持

　　最常見的類型有以下幾種

1：樣式規則，部署了CSSStyleRule介面
3：輸入規則，部署了CSSImportRule介面
4：Media規則，部署了CSSMediaRule介面
5：字體規則，部署了CSSFontFaceRule介面
<style>
.box{width: 100px;height: 100px;background-color:pink;}
</style>

<script>
var rules = document.styleSheets[0].cssRules|| document.styleSheets[0].rules;
console.log(rules[0].type);//1
</script>

 

方法

　　CSSStyleRule對象本身並沒有方法，操作CSSStyleRule對象的方法位於CSSStyleSheet對象中

添加規則

【1】insertRule()

　　insertRule(rule,index)方法表示向cssRules集合中指定的位置插入rule字元串，並返回當前樣式表的索引值

　　[註意]IE8-瀏覽器不支持

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<div class="box">測試文字</div>
<button id="btn">文字變紅</button>
<script>
var rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//'.box { width: 100px; height: 100px; background-color: pink; }'
console.log(rules[0].cssText);
btn.onclick = function(){
    console.log(document.styleSheets[0].insertRule('div{color:red;}',0));//0
    console.log(rules[0].cssText);//'div { color: red; }'
}
</script>

　　雖然，IE8-瀏覽器不支持insertRule()方法，但支持類似的addRule()方法

　　addRule(ruleKey,ruleValue,index)方法表示向cssRules集合中指定的位置插入rule字元串，並返回-1

　　[註意]firefox不支持

<style>
.box{height: 100px;width: 100px;background-color:pink;}
</style>

<div class="box">測試文字</div>
<button id="btn">文字變紅</button>
<script>
var rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
//'.box { width: 100px; height: 100px; background-color: pink; }'
console.log(rules[0].cssText);
btn.onclick = function(){
    console.log(document.styleSheets[0].addRule('div','color:red',0));//-1    
    console.log(rules[0].cssText);
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Js操作DOM元素及獲取瀏覽器高寬
    在JavaScript中，經常會來獲取Document文檔元素，是 HTML 文檔對象模型的英文縮寫，Document Object Model for HTML，是基於瀏覽器編程，HTML DOM 定義了用於 HTML 的一系列標準的對象，以及訪問和處理 HTML 文檔的標準方法。 通過 DOM， ...
  • position定位
    position的英文意思呢是位置，方位; 地位，職位; 態度; 狀態； 它有定位有四個值分別是絕對定位的兩個值absolute和fixed，相對定位的relative，還有一個預設的值static而它呢沒有定位。 下麵呢，我說先說一下： position的值，relative和absolute分別 ...
  • 認識position定位
    在html中，改變佈局有兩種方式一種是float一種是position定位，今天解釋一下什麼position定位。 position是CSS中非常重要的一個屬性，通過position屬性，我們可以讓元素相對於其正常位置，父元素或者瀏覽器視窗進行偏移。 postion屬性我們成為定位，它有4個不同類型 ...
  • CSS——Position定位
    Position這個屬性定義建立元素佈局所用的定位機制。任何元素都是可以進行定位的，不過絕對或者固定一個元素會產生一個塊級框，不論該元素是什麼類型；相對定位元素會相對於它在正常文檔流中的預設位置偏移。 Position元素一般來說擁有五個屬性，分別有： 1.absolute(生成絕對定位的元素，相對 ...
  • 解讀Position
    首先Position在字面講是位置的意思，在HTML中是定位的意思，它有四種屬性：分別是static是靜態的，也是預設的效果，沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。 absolute（絕對定位） absolute(絕對定位)不光脫離了文本流，而且在文本流中也不會給這 ...
  • 【Bootstrap】入門例子創建
    本文簡單介紹下如何來使用 Bootstrap，通過引入 Bootstrap，來實現一個最基本的入門例子。 在前一篇博文【Bootstrap】1.初識Bootstrap 基礎之上，我們完全可以更加方便快捷的創建一個的簡單例子。 在Bootstrap的官方網站的下載頁面 http://getbootst ...
  • 【Bootstrap】1.初識Bootstrap
    作為Web前端開發框架，Bootstrap為大多數標準的UI設計常見提供了用戶友好、擴瀏覽器的解決方案。 1.下載Bootstrap 打開官方網址 http://getbootstrap.com/ 進行下載。 2.準備項目模板文件夾 接下來，我們為第一個項目創建一個文件夾以及一些基本的文件。謂詞我們 ...
  • JavaScript調試 - debugger語句
    語法： 作用： 啟動調試器 備註： 1. 可以將debugger語句放在過程的任何地方以中止執行。2. 使用debugger語句類似於在代碼中設置斷點。 3. debugger語句中止執行，但它不關閉任何文件或清除任何變數。 【註】只有打開調試器，否則debugger語句不起作用 實例： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類