如何使用 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 方法的使用。

HTML

  

    
    

  

    
        GeeksforGeeks
    
  
    
        Hello Geeks!! welcome to geeksforgeeks
    
  
    
  
    
        clickme
    
  
    
        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');
        })
    

  

输出：

输出