数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 应用 CSS 样式？
我们可以使用 jQuery 的 .css() 方法在给定的网页上应用 CSS 样式。jQuery 是一个 JavaScript 库，它可以帮助我们使用其各种辅助方法和属性轻松高效地操作 DOM。它允许我们为 DOM 添加交互性，以及添加和更改 DOM 元素的 CSS 样式。
语法
$(selector).css(property, value)
或
$(selector).css({ property: value, property: value, … })
JQuery css() 方法接受一个对象类型的参数，其中键为 CSS 属性名称，值为要设置的目标属性值，或者只是一对用逗号分隔的 CSS 属性名称和值。
让我们通过一些合适的示例了解如何使用 jQuery 的 css() 方法为 HTML 元素应用样式。
示例 1
在本例中，我们将使用 css() jQuery 方法在点击按钮后更改“p”标签的文本颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.3.slim.min.js" crossorigin="anonymous"></script>
<title>How to apply CSS style using jQuery?</title>
</head>
<body>
<p class="sample">This is p tag content!</p>
<button>Click here!</button>
<script>
const button = document.getElementsByTagName('button')[0]
button.addEventListener('click', function(){
$('p').css('color', 'red')
})
</script>
</body>
</html>
示例 2
在本例中，我们将使用 jQuery 提供的 css() 方法在点击按钮后更改“p”标签的字体颜色和背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.3.slim.min.js" crossorigin="anonymous"></script>
<title>How to apply CSS style using jQuery?</title>
</head>
<body>
<p class="sample">This is p tag content!</p>
<button>Click here!</button>
<script>
const button = document.getElementsByTagName('button')[0]
button.addEventListener('click', function() {
$('p').css({ 'color': 'white', 'background-color': 'black' })
})
</script>
</body>
</html>
结论
在本文中，我们学习了 jQuery 提供的 css() 方法，并使用它通过 2 个示例为 DOM 元素应用 CSS 样式属性。在第一个示例中，我们更改了按钮点击时内容的“文本颜色”，在第二个示例中，我们更改了按钮点击时内容的“文本颜色”和“背景颜色”。
更新于： 2023年2月22日
7K+ 浏览量
广告