jquery 加样式
使用 jQuery 添加样式
jQuery 提供了多种方法来动态添加或修改元素的样式。以下是几种常见的方法：
使用 .css() 方法
.css() 方法可以直接设置单个或多个 CSS 属性。语法如下：
// 设置单个属性
$('selector').css('property', 'value');
// 设置多个属性
$('selector').css({
'property1': 'value1',
'property2': 'value2'
});示例：
// 设置字体颜色为红色
$('#myElement').css('color', 'red');
// 同时设置背景色和边框
$('.myClass').css({
'background-color': 'blue',
'border': '1px solid black'
});使用 .addClass() 方法
通过添加预定义的 CSS 类来应用样式。这种方法更推荐，因为它将样式与行为分离。
$('selector').addClass('className');示例：
// 添加类 'highlight' 到元素
$('#myElement').addClass('highlight');使用 .removeClass() 方法
移除元素的某个 CSS 类。
$('selector').removeClass('className');示例：
// 移除类 'highlight'
$('#myElement').removeClass('highlight');使用 .toggleClass() 方法
切换元素的某个 CSS 类（如果存在则移除，否则添加）。
$('selector').toggleClass('className');示例：
// 切换类 'active'
$('#myElement').toggleClass('active');动态样式操作
结合 jQuery 的事件方法，可以实现动态样式修改。
示例：点击按钮改变元素样式
$('#myButton').click(function() {
$('#myElement').css('background-color', 'yellow');
});注意事项
- 使用
.css()方法直接操作样式时，样式会以内联方式添加到元素（优先级较高）。 - 推荐使用
.addClass()和.removeClass()，因为这种方式更易于维护，符合关注点分离原则。 - 可以通过链式调用组合多个方法，例如：
$('#myElement').addClass('highlight').css('font-size', '20px');
以上方法可以灵活运用于各种场景，根据需求选择合适的方式。
