jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax操作，让开发人员能够更加轻松地编写跨浏览器的代码，在Web开发中，经常需要使用jQuery来获取和设置HTML元素的CSS样式，本文将详细介绍如何使用jQuery获取CSS属性和值，并提供一些实用的例子。
我们需要了解jQuery的选择器，选择器用于定位页面上的特定元素，要获取所有具有特定类名的元素，可以使用类选择器，假设我们有一个类名为"highlight"的元素，我们可以使用以下代码来选择它：
var elements = $('.highlight');
获取元素后，我们可以使用jQuery的.css()方法来获取或设置CSS属性，这个方法接受两个参数：第一个是CSS属性的名称，第二个是属性的值（仅在设置CSS时需要），如果只传递一个参数，jQuery将返回该属性的当前值。
以下是一些常见的获取CSS属性的例子：
1、获取内联样式：
要获取元素的内联样式，如颜色、字体大小等，可以直接使用.css()方法，获取一个元素的背景颜色：
var bgColor = $('.highlight').css('background-color');
console.log(bgColor); // 输出: #ff0000
2、获取计算后的样式：
有时我们需要获取浏览器计算后的样式，而不是内联样式，为此，我们可以使用.getComputedStyle()方法，这个方法返回一个包含计算后的样式的对象，获取一个元素的宽度：
var computedWidth = window.getComputedStyle($('.highlight')[0]).width;
console.log(computedWidth); // 输出: 100px
3、获取多个CSS属性：
如果需要获取多个CSS属性，可以将属性名称作为数组传递给.css()方法，获取元素的宽度和高度：
var dimensions = $('.highlight').css(['width', 'height']);
console.log(dimensions); // 输出: { width: "100px", height: "50px" }
4、设置CSS属性：
除了获取CSS属性外，.css()方法还可以用于设置元素的样式，将所有.highlight类的背景颜色设置为蓝色：
$('.highlight').css('background-color', 'blue');
5、动画和过渡：
jQuery允许我们通过.animate()方法为元素添加动画效果，将元素的宽度在500毫秒内从100px变为200px：
$('.highlight').animate({ width: '200px' }, 500);
6、响应式设计：
在响应式设计中，我们可能需要根据屏幕尺寸或其他条件来动态设置元素的样式，jQuery可以帮助我们实现这一点，当屏幕宽度小于768px时，为元素添加一个类：
if ($(window).width() < 768) {
$('.responsive-element').addClass('small-screen');
}
jQuery提供了强大的功能来获取和设置CSS属性，通过熟练掌握这些功能，我们可以创建更加动态和响应式的Web页面，在实际开发中，合理使用jQuery的CSS操作功能可以大大提高开发效率。