如何使用jQuery来应用CSS样式

在这篇文章中，我们将探讨如何将CSS样式应用于HTML元素。在开始本文之前，建议你有一些关于HTML、CSS、JavaScript和jQuery的基本知识。

通过使用简单的JavaScript API可以改变一个元素的CSS属性，但是我们尝试使用jQuery css()方法来完成这个挑战。

语法:

$().css(propertyname, value);
$().css(properties);

有许多类型的CSS方法，这意味着每个方法都有相同的名字，但需要不同的参数。我们只讨论两种方法，其中一种用于改变单一的CSS属性，而另一种则用于同时改变多个CSS属性。用第二种方法，你可以传递一个JSON字符串对象作为参数，你想把它应用到HTML元素上。

JSON字符串对象包含CSS属性和它们的值，第一个方法只需要2个参数，即属性名称和值。

例子：通过点击按钮，它为所选元素添加了多个CSS属性，但通过双击按钮，它只添加了一个CSS属性。这个例子的动机是展示两种类型的CSS方法的使用，这两种方法已经讨论过了。

<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align: center; 
    border: 2px solid green;
    min-height: 240px;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <p id="context">
        Hello Geeks!! welcome to geeksforgeeks
    </p>
  
    <br>
  
    <button id="change">
        clickme
    </button>
  
    <script>
        let css_property =
        {
            "color": "green",
            "font-size": "20px"
        }
         $('#change').on('click', function () { // For multiple css property$ ('#context').css(css_property);
        });
  
         $('#change').on('dblclick', function () { // For single css property$ ('#context').css('display', 'none');
        })
    </script>
</body>
  
</html>

输出:

如何使用jQuery来应用CSS样式？