深入理解腳本化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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類