jquery修改css样式
修改单个样式属性
使用 css() 方法直接修改元素的单个样式属性。
$("#elementId").css("color", "red"); // 修改文字颜色为红色
$(".className").css("font-size", "16px"); // 修改字体大小修改多个样式属性
通过传递对象一次性修改多个样式。
$("#elementId").css({
"background-color": "blue",
"padding": "10px",
"border": "1px solid black"
});动态计算样式值
支持回调函数动态返回样式值。
$(".item").css("width", function(index) {
return (index + 1) * 100 + "px"; // 根据索引动态设置宽度
});获取当前样式值
不传递第二个参数时返回当前样式值。
var currentColor = $("#elementId").css("color"); // 获取元素的文字颜色
console.log(currentColor); // 输出如 "rgb(255, 0, 0)"注意事项
- 属性名支持驼峰式（如
backgroundColor）或连字符式（如background-color）。 - 修改样式会直接影响元素的
style属性，优先级高于外部CSS。 - 对于需要频繁修改的样式，建议通过添加/移除CSS类实现（见下方）。
通过类名批量修改样式
定义CSS类后通过 addClass()/removeClass() 切换样式。
/* CSS定义 */
.highlight {
background: yellow;
font-weight: bold;
}$("#elementId").addClass("highlight"); // 添加样式类
$("#elementId").removeClass("highlight"); // 移除样式类响应式样式修改
结合事件实现交互式样式变化。
$("#button").click(function() {
$("#target").css("display", "none"); // 点击按钮隐藏元素
});
