jquery添加css样式
使用 .css() 方法直接设置样式
通过 jQuery 的 .css() 方法可以直接为元素添加或修改 CSS 样式。该方法支持单一样式或批量样式的设置。
单一样式设置
语法：$(selector).css("property", "value")
示例：
$("#target").css("color", "red"); // 将文字颜色设为红色
$(".box").css("background-color", "#f0f0f0"); // 设置背景色批量设置样式
语法：$(selector).css({ "property": "value", "property": "value" })
示例：
$("#target").css({
"font-size": "16px",
"border": "1px solid black",
"padding": "10px"
});通过 .addClass() 添加预定义样式
适合需要复用或动态切换样式的场景。需先在 CSS 中定义类名样式，再通过 jQuery 添加类名。
CSS 定义
.highlight {
background-color: yellow;
font-weight: bold;
}jQuery 调用
$("#target").addClass("highlight"); // 添加类名
$("#target").removeClass("highlight"); // 移除类名
$("#target").toggleClass("highlight"); // 切换类名（存在则移除，不存在则添加）动态计算样式值
结合 JavaScript 变量或函数返回值动态设置样式。
示例：根据窗口宽度调整元素宽度
$(window).resize(function() {
$("#responsive-box").css("width", $(window).width() * 0.8 + "px");
});示例：随机颜色生成
$("#random-color").click(function() {
const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
$(this).css("background-color", randomColor);
});注意事项
- 性能优化：频繁操作样式时，优先使用
.addClass()而非.css()，减少重绘次数。 - 单位处理：数值类属性（如
width、margin）需手动添加单位（如px），否则可能无效。 - 优先级：通过
.css()设置的样式为内联样式，优先级高于外部 CSS 文件中的定义。
通过以上方法，可以灵活地为元素添加或修改样式，适应不同场景需求。
