使用JQuery CSS函数，我们可以操纵HTML元素的CSS属性和类，还可以根据文档的CSS类来选择文档中的HTML元素。在本文中，我将更深入地介绍操作方式，并探索我们可以使用该函数来实现的目标。

使用jQuery访问CSS属性

我们可以使用JQuery读取和更改HTML元素的CSS属性。

读取CSS属性

我们可以使用.css()方法读取元素的CSS属性，如下所示：

var backgroundColor = $("#theElement").css('background-color');

更改CSS属性

我们可以使用jQuery更改HTML元素的CSS属性，如下所示：

$("#theElement").css('background-color', '#00ff00');

请注意传递给css()方法的额外参数，即"#00ff00"值。这是将CSS background-color属性设置为的值。

jQuery还可以通过将所有CSS属性都放入JavaScript对象中，从而在一个调用中更改多个CSS属性。看起来是这样的：

$("#theElement").css(
    {
    'background-color' : '#00ff00',
    'border'           : '1px solid #000000'
    }
    );

使用jQuery访问CSS类

jQuery的CSS操作不限于CSS属性。我们还可以使用JQuery更改HTML元素的CSS类。 CSS类在CSS样式表或者<style>元素中定义。

我们可以使用jQuery将CSS类添加到HTML元素中，如下所示：

$("#theElement").addClass('theClass');

这个jQuery示例选择ID为theElement的元素，然后向其添加CSS类theClass。

我们可以通过在方法参数中用空格分隔类名来添加多个类。像这样：

$("#theElement").addClass('theClass class2 class3');

我们也可以使用toggleClass()方法使用jQuery切换CSS类。切换CSS类意味着添加该类(如果尚不存在的话)，或者删除该类(如果存在的话)。这是一个例子：

$("#theElement").toggleClass('theClass');

我们还可以通过用空格将每个类名分开来切换多个类，如下所示：

$("#theElement").toggleClass('theClass class2 class3');