jquery获取css

jQuery获取CSS属性的方法

使用jQuery获取元素的CSS属性可以通过.css()方法实现。该方法可以读取或设置一个或多个CSS属性。

获取单个CSS属性

语法：

$(selector).css(propertyName)

示例：

var color = $('#element').css('color');
console.log(color); // 输出颜色值（如 "rgb(255, 0, 0)"）

获取多个CSS属性

语法：

$(selector).css([propertyName1, propertyName2, ...])

示例：

var styles = $('#element').css(['color', 'font-size', 'background']);
console.log(styles); // 输出对象 {color: "red", fontSize: "16px", background: "rgb(255, 255, 255)"}

注意事项

• 返回的颜色值可能因浏览器不同而格式不同（如十六进制、RGB等）。
• 复合属性（如margin）需要单独获取子属性（如margin-top）。
• 数值类属性会返回带单位的字符串（如"16px"）。
• 该方法获取的是计算样式（computed style），即最终应用到元素上的样式。

示例代码

// 获取单个属性
var width = $('.box').css('width');

// 获取多个属性
var boxStyles = $('.box').css(['width', 'height', 'background-color']);
console.log(boxStyles.width, boxStyles.height);

原生JavaScript替代方案

如需不依赖jQuery获取样式，可使用原生方法：

// 获取内联样式
element.style.propertyName;

// 获取计算样式
window.getComputedStyle(element).getPropertyValue('property-name');