jquery控制css
jQuery 控制 CSS 的基本方法
jQuery 提供了多种方法来动态控制元素的 CSS 样式，包括直接修改样式、添加/移除类等。以下是几种常用方法：
修改单个 CSS 属性
使用 .css() 方法可以直接修改元素的样式属性。语法为 $(selector).css(propertyName, value)。
$("#element").css("color", "red"); // 将文本颜色改为红色
$(".box").css("background-color", "#f0f0f0"); // 修改背景色修改多个 CSS 属性 通过传递对象一次性修改多个样式属性。
$("#element").css({
"font-size": "16px",
"margin": "10px",
"padding": "5px"
});类名操作控制样式
添加类
使用 .addClass() 方法为元素添加预定义的 CSS 类。
$("#element").addClass("highlight active"); // 同时添加多个类移除类
使用 .removeClass() 方法移除指定的类名。
$("#element").removeClass("inactive"); // 移除单个类
$(".item").removeClass("hidden disabled"); // 移除多个类切换类
通过 .toggleClass() 根据当前状态切换类（存在则移除，不存在则添加）。
$("#button").click(function() {
$(this).toggleClass("active"); // 点击时切换 active 类
});获取样式值
使用 .css() 方法传入属性名可获取当前计算值。
var width = $("#element").css("width"); // 获取宽度值（如 "200px"）
var opacity = $(".modal").css("opacity"); // 获取透明度注意事项
- 修改样式时，属性名可以用驼峰式（如
backgroundColor）或连字符式（如background-color）。 - 直接修改样式会覆盖内联样式，而类名操作更适合维护和复用。
- 获取数值型样式（如
width）时返回的是字符串（如"100px"），需自行转换为数字。
动画与样式结合
jQuery 的 .animate() 方法可通过过渡效果修改样式。
$("#box").animate({
left: "+=50px",
opacity: 0.5
}, 1000); // 在1秒内向右移动并淡出
