jquery增加样式
使用 jQuery 增加样式的方法
通过 .css() 方法直接设置样式
$('selector').css('property', 'value') 可以直接为元素添加内联样式。
例如修改文字颜色和背景:

$('#myElement').css('color', 'red');
$('.myClass').css('background-color', '#f0f0f0');
批量设置多个样式
传递对象参数可一次性设置多个样式属性:

$('div').css({
'font-size': '16px',
'border': '1px solid black',
'padding': '10px'
});
通过添加/移除类名管理样式
定义 CSS 类后,用 jQuery 动态控制:
// 添加类
$('p').addClass('highlight');
// 移除类
$('button').removeClass('inactive');
// 切换类
$('#toggleBtn').click(function() {
$(this).toggleClass('active');
});
链式操作示例
jQuery 支持链式调用组合样式操作:
$('li')
.css('margin-left', '20px')
.addClass('list-item')
.hover(
function() { $(this).addClass('hover-effect'); },
function() { $(this).removeClass('hover-effect'); }
);
注意事项
- 内联样式(通过
.css())优先级高于外部样式表,但会降低代码可维护性 - 推荐将样式定义在 CSS 文件中,通过
.addClass()方式应用 - jQuery 3.0+ 支持现代浏览器,部分老旧方法如
.toggle()已废弃






