CSSStyleSheet 物件詳解

admin發表於2018-08-18
CSS物件

CSSStyleSheet物件表示一個樣式表，包括以下型別:

（1）.<link>元素載入的樣式表。

（2）.<style>元素定義的樣式表。

[JavaScript] 純文字檢視 複製程式碼
let sheets = document.styleSheets;

上面程式碼獲取頁面中所有的樣式表，通過索引可以訪問某一個樣式表:

[JavaScript] 純文字檢視 複製程式碼
let declaration = document.styleSheets[0]

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<link rel="stylesheet" href="css/style.css"/>
<style>
#ant {
  width:100px;
  height:100px;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  let odiv = document.getElementById("ant");
  let styleSheet = document.styleSheets[1]
  odiv.innerHTML = styleSheet.cssRules[0].cssText;
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

上面程式碼中用到的屬性在後續內容中有介紹。

通過<link>和<style>元素物件的sheet屬性也可以獲取CSSStyleSheet物件:

[JavaScript] 純文字檢視 複製程式碼
document.getElementsByTagName("link")[0].sheet;
document.getElementsByTagName("style")[0].sheet;

CSSStyleSheet物件屬性:

屬性描述
media 獲取當前樣式作用的媒體。
disabled開啟或禁用一張樣式表。
href 返回CSSStyleSheet物件連線的樣式表地址。
title 返回CSSStyleSheet物件的title值。
type返回CSSStyleSheet物件的type值，通常是text/css。
parentStyleSheet返回包含了當前樣式表的那張樣式表。
ownerNode 返回CSSStyleSheet物件所在的DOM節點，通常是<link>或<style>。
cssRules 返回樣式表中所有的規則。

CSSStyleSheet物件方法:

方法描述
insertRule() 在當前樣式表的cssRules物件插入CSS規則。
deleteRule()在當前樣式表刪除cssRules物件的CSS規則。

相關文章