資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 JavaScript 中插入新的 CSS 規則？
新增新的 CSS 規則可以幫助您為網頁或應用程式建立所需的視覺效果。本文將介紹如何在使用 JavaScript 時插入新的 CSS 規則。
它將提供有關如何編寫和應用必要程式碼以實現所需結果的分步說明。此外，我們還將討論在將新的 CSS 規則插入現有專案時可能出現的一些潛在問題。
稱為 CSS（*層疊樣式表*）的樣式表語言用於塑造將在瀏覽器中顯示為網頁的 HTML 元素。使用 HTML 構建的網站如果沒有 CSS 將看起來毫無吸引力。
JavaScript 中的 insertRule()
使用 *insertRule()* 方法將新的 CSS 規則新增到當前樣式表中。儘管 *insertRule()* 只是一個 *CSSStyleSheet* 方法，但它實際上將規則插入到 *CSSStyleSheet* 中。它的內部 *CSSRuleList* 被稱為 cssRules。
語法
以下是 *insertRule()* 的語法
insertRule(rule) insertRule(rule, index)
讓我們看看以下示例，以清楚地瞭解如何在使用 JavaScript 時新增新的 CSS 規則。
示例
在以下示例中，我們正在執行一個指令碼，該指令碼有助於使用 JavaScript 同時插入 HTML 和 CSS。
<!DOCTYPE html>
<html>
<body>
<script>
document.querySelector('body').innerHTML += '<div id="tutorial">Welcome</div>';
function insert( code ) {
var style = document.createElement('style');
if (style.styleSheet) {
style.styleSheet.cssText = code;
} else {
style.innerHTML = code;
}
document.getElementsByTagName("head")[0].appendChild( style );
}
insert(
"#tutorial {color :#1C2833; font-size: 35px;}" + "body {background-color: #CCCCFF;}"
)
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含文字以及應用於文字和背景的 CSS 的輸出。這是由使用者執行指令碼時觸發的事件引起的。
示例
讓我們考慮另一個示例，其中我們將 CSS 規則新增到最後一個樣式表的末尾。
<!DOCTYPE html>
<html>
<body>
<script>
var css = new function() {
function addStyle() {
let head = document.head;
let style = document.createElement("style");
head.appendChild(style);
}
this.insert = function(rule) {
if(document.styleSheets.length == 0) { addStyle(); }
let sheet = document.styleSheets[document.styleSheets.length - 1];
let rules = sheet.rules;
sheet.insertRule(rule, rules.length);
}
}
css.insert("body { background-color: #DFFF00}");
</script>
</body>
</html>
執行上述指令碼後，Web 瀏覽器將顯示顏色的變化結果，從而觸發事件，從而幫助應用 CSS。
示例
在這種情況下，我們正在執行指令碼以使用帶有 CSS 的提到的指令碼訪問 div 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="demo">
This is a JavaScript program
</div>
<script>
var creatingStyle = document.createElement("style");
document.head.appendChild(creatingStyle);
creatingStyle.sheet.insertRule(`#demo{
background-color: red;
}`);
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含應用於網頁上的 CSS 的文字，這是使用者執行指令碼時觸發的事件的結果。
更新於：2023 年 1 月 18 日
1K+ 次檢視
廣告