jquery获取style

jQuery 获取样式的方法

使用jQuery获取元素的样式属性可以通过以下几种方式实现：

获取内联样式

使用.css()方法直接获取元素的内联样式值：

var color = $('#element').css('color');
var fontSize = $('.class').css('font-size');

获取计算样式

.css()方法会自动返回最终计算后的样式值（包括外部CSS样式表定义的样式）：

var margin = $('div').css('margin-top');

获取多个样式

可以传入数组一次性获取多个样式属性：

var styles = $('#element').css(['color', 'font-size', 'padding']);
console.log(styles.color); // 输出颜色值

注意事项

• 返回的颜色值可能是RGB/RGBA格式（如rgb(255, 0, 0)），而非原始定义的HEX值
• 尺寸类属性（如width/height）返回带单位的值（如"16px"）
• 复合属性（如margin）需要指定具体方向（如margin-left）

原生DOM方法对比

如需获取原始CSS规则（非计算值），可通过原生方法：

var style = document.getElementById('element').style.color;

对于需要频繁操作样件的场景，建议使用.css()方法获取实时计算值，或通过添加/移除class的方式管理样式。