数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究在 jQuery 中，有哪些方法可以用来设置选中元素的样式？
开发者可以使用 JavaScript 或 jQuery 来操作 HTML 元素的样式。为此，开发者首先需要使用 jQuery 访问 HTML 元素，然后使用各种方法来设置选中 HTML 元素的样式。
有时，我们需要使用 jQuery 来管理元素的样式。例如，当用户点击按钮时，我们需要更改文本的颜色、图像尺寸等。在这种情况下，我们可以使用以下 jQuery 方法来更改 HTML 元素的样式。
使用 jQuery 的 css() 方法设置选中元素的样式
第一种方法是 css() 方法，我们可以使用它来使用 jQuery 设置选中 HTML 元素的样式。它以属性名称和值作为参数。
语法
用户可以按照以下语法使用 jQuery 的 css() 方法。
$("selector").css("property", "value");
在上述语法中，选择器是用于访问 HTML 元素的 CSS 选择器。
参数
属性 - 它是要应用于 HTML 元素的 CSS 属性的名称。
值 - 它是 CSS 属性的值。
示例
在这个例子中，我们在 <head> 标签中包含了 jQuery 脚本以便使用它。之后，我们创建了两个 div 元素。第一个 div 包含名为“one”的类名，第二个 div 包含名为“second”的 id。
在 jQuery 中，我们分别使用 id 和类名访问这两个 div，并分别应用不同的颜色到两个 div 的文本。此外，我们通过标签名访问“div”元素，并更改文本的字体大小，用户可以在输出中观察到这一点。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the CSS() method of jQuery to set style on selected HTML elements</h2>
<div class = "one"> First </div>
<div id = "second"> This is a second element. </div>
<script>
$(document).ready(function () {
$(".one").css("color", "red");
$("#second").css("color", "blue");
$("div").css("font-size", "20px");
});
</script>
</body>
</html>
示例
在这个例子中，我们也使用 css() 方法来设置选中 HTML 元素的样式。但是，在这里我们将包含属性值对的单个对象作为 css() 方法的参数传递。
我们创建了一个包含多个属性值对的单个对象。之后，我们将它作为 css() 方法的参数传递。在输出中，用户可以观察到所有 CSS 属性都应用到了 div 元素上。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h3>Using the <i> CSS() method of JQuery </i> to set style on selected HTML elements</h3>
<div class = "test"> This is test div. </div>
<script>
$(document).ready(function () {
// setting up multiple CSS properties for div element.
$(".test").css({
"color": "red",
"background-color": "yellow",
"border": "2px solid black",
"padding": "10px",
"font-size": "20px"
});
});
</script>
</body>
</html>
使用 jQuery 的 addClass() 方法设置选中元素的样式
jQuery 的 addClass() 方法用于向 HTML 元素添加特定的类。在 CSS 中，我们可以向特定的类添加一些样式。之后，每当我们需要在元素上应用该样式时，我们就可以使用 jQuery 的 addClass() 方法向元素添加该类。
语法
用户可以按照以下语法使用 jQuery 的 addClass() 方法来设置选中 HTML 元素的样式
$("selecotr").addClass("classname");
在上述语法中，“classname”是要添加到 HTML 元素的类名。
示例
在下面的例子中，每当用户点击按钮时，它就会执行 addDemo() 函数。我们在函数中使用其 id 选择 HTML 元素，并将“demo”类添加到 div 元素。
此外，我们还向“demo”类添加了一些样式。在输出中，用户可以观察到，每当他们点击按钮时，“demo”类的样式就会应用到 div 元素上。
<html>
<head>
<style>
.demo {
color: green;
background-color: pink;
border: 2px solid black;
padding: 10px;
font-size: 2rem;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> addClass() method of JQuery </i> to set style on selected HTML elements.</h2>
<div id = "one">This is inside the demo div.</div>
<br>
<button onclick = "addDemo()"> Add demo class </button>
<script>
function addDemo() {
$("#one").addClass("demo");
}
</script>
</body>
</html>
使用 jQuery 的 toggleClass() 方法设置选中元素的样式
jQuery 的 toggleClass() 方法允许用户在两个类之间切换。我们可以在两个类中添加不同的 CSS 样式并在两个类之间切换。当我们需要在应用程序中添加深色和浅色主题时，这很有用。
语法
用户可以按照以下语法使用 toggleClass() 方法来更改选中元素的 CSS。
$("selector").toggleClass("class1 class2");
在上述语法中，class1 和 class2 是要在其之间切换的两个类名。
示例
在下面的例子中，我们向“one”和“two”类添加了不同的样式。最初，我们将“one”类添加到 HTML 元素。每当用户点击按钮时，它就会在“one”和“two”类之间切换。在输出中，用户可以观察到元素的样式是如何变化的。
<html>
<head>
<style>
.one {
color: green;
background-color: pink;
border: 2px solid black;
padding: 10px;
font-size: 2rem;
}
.two {
color: red;
background-color: yellow;
border: 2px solid blue;
padding: 20px;
font-size: 3rem;
}
</style>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> toggleClass() method of JQuery </i> to set style on selected HTML elements</h2>
<div id = "element" class = "one"> This is inside the demo div.</div> <br>
<button onclick = "toggleClass()"> toggle class </button>
<script>
function toggleClass() {
// toggle between one and two class
$("#element").toggleClass("one two");
}
</script>
</body>
</html>
用户学习了如何使用 jQuery 方法来设置选中 HTML 元素的 CSS 样式。在第一种方法中，我们使用了 css() 方法，这是使用 jQuery 设置 CSS 的最佳方法。在第二种方法中，我们使用了 addClass() 方法，在第三种方法中，我们使用了 toggleClass() 方法。用户应该根据他们在开发过程中处理的情况选择使用任何一种方法。
260 次浏览
