jquery 加样式
jQuery 添加样式的方法
使用 jQuery 可以方便地操作 DOM 元素的样式。以下是几种常用的添加样式的方法：
1. 使用 .css() 方法直接设置样式
$("#elementId").css("color", "red"); // 设置单个样式
$("#elementId").css({"color": "red", "font-size": "16px"}); // 设置多个样式2. 添加/移除 CSS 类
$("#elementId").addClass("highlight"); // 添加类
$("#elementId").removeClass("highlight"); // 移除类
$("#elementId").toggleClass("highlight"); // 切换类3. 动态修改样式属性
$(".elements").css("width", function(index, value) {
return parseFloat(value) * 1.2; // 宽度增加20%
});4. 获取当前样式值
var color = $("#elementId").css("color"); // 获取颜色值5. 使用链式调用
$("#elementId")
.css("background-color", "yellow")
.addClass("active")
.fadeIn(300);注意事项：
- 使用
.css()方法设置的是行内样式，优先级高于外部样式表 - 添加/移除类名是更推荐的做法，便于维护和复用样式
- 可以结合 CSS 过渡和动画效果创建更丰富的交互体验
示例：按钮点击改变样式
$("#myButton").click(function() {
$(this)
.css("background-color", "#ff0000")
.text("Clicked!")
.addClass("animated");
});这些方法可以根据具体需求灵活组合使用，实现各种动态样式效果。
