极客教程如何使用jQuery在运行时创建一个CSS规则或类
为我们的HTML写一个CSS文件是一种常见的做法。这些被称为静态CSS。当我们想在运行时创建我们的层叠样式表规则时，我们需要jQuery。jQuery使我们能够动态地将样式应用于我们的HTML。
一旦写好的CSS规则可以存储在一个变量中，并在需要时多次使用。
我们使用jQuery的css("arrtibute1", "value1") 。
下面的例子说明了这个方法。
示例 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS Rules with JQuery</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="myId">
<h1>GeeksforGeeks</h1>
</div>
<div class="myclass">
<h1>A Computer Science Portal for Geeks</h1>
</div>
<script>
// Here 'my_css' variable stores the Style
var my_css = {
backgroundColor: "red",
color: "rgb(0,255,0)"
}
("#myId").css(my_css);
var my_class_css = {
background: "green",
color: "rgb(255,255,255)"
}
(".myclass").css(my_class_css);
</script>
</body>
</html>
输出:
例子2：它也有一个替代方案，你可以直接使用类似CSS的造型代码，而不是类似JavaScript的造型。
<!DOCTYPE html>
<html>
<head>
<title>CSS Rules with JQuery</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="myId">
<h1>Without Coding</h1>
</div>
<div class="myclass">
<h1>There are no Geeks</h1>
</div>
<script>
(document).ready(function() {
// Build your CSS.
var body_css = {
"background-color": "rgb(0,0,0)",
"font-weight": "",
"color": "rgb(255,255,255)"
}
("body").css(body_css);
});
</script>
</body>
</html>
输出:
