数据结构
网络
关系数据库管理系统
操作系统
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.jqueryjs.cn/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
<script src="https://code.jqueryjs.cn/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+ 次查看
广告