如何使用jQuery来应用CSS样式

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

语法

$(selector).css(property, value)

或

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

JQuery css()方法接受一个对象类型的参数，其中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>