如何使用 jQuery 应用 CSS 样式?

cssweb developmentfront end technologyjquery更新于 2025/1/24 0:44:17

我们可以使用 jQuery 的 .css() 方法将 CSS 样式应用于给定的网页。jQuery 是一个 JavaScript 库，它使用各种辅助方法和属性帮助我们轻松高效地操作 DOM。它允许我们为 DOM 添加交互性，以及添加和更改 DOM 元素的 CSS 样式。

语法

$(selector).css(property, value)

或

$(selector).css({ property: value, property: value, … })

JQuery css() 方法接受一个 object 类型的参数，其中 key 为 CSS 属性名称，value 为要设置的属性值;或者仅接受一对以逗号分隔的 CSS 属性名称和值。

让我们通过一些合适的示例来了解如何使用 jQuery 的 css() 方法将样式应用于 HTML 元素。

示例 1

在此示例中，我们将更改单击按钮后使用 css() jQuery 方法的"p"标签。

<!DOCTYPE html>
<html lang="en">
<head>
   <script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" 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.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" 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>