jquery 样式

jQuery 样式操作基础

jQuery 提供了多种方法来操作 HTML 元素的样式，包括直接修改 CSS 属性、添加/移除类名等。

修改 CSS 属性 使用 .css() 方法可以直接修改元素的样式属性。可以传递单个属性或一组属性。

// 修改单个属性
$('#element').css('color', 'red');

// 修改多个属性
$('#element').css({
  'color': 'blue',
  'font-size': '16px'
});

添加/移除类名 使用 .addClass() 和 .removeClass() 可以动态添加或移除类名，适合批量样式修改。

// 添加类名
$('#element').addClass('highlight');

// 移除类名
$('#element').removeClass('inactive');

切换类名 .toggleClass() 方法根据当前状态切换类名的存在与否。

// 切换类名（存在则移除，不存在则添加）
$('#element').toggleClass('active');

样式相关工具方法

检查类名是否存在 使用 .hasClass() 可以检查元素是否包含指定类名。

if ($('#element').hasClass('hidden')) {
  console.log('元素已隐藏');
}

获取样式属性值 通过 .css() 方法传入属性名可以获取当前计算样式值。

const fontSize = $('#element').css('font-size');
console.log(fontSize);

动画样式效果

基础动画 使用 .animate() 方法可以实现自定义动画效果。

$('#box').animate({
  opacity: 0.5,
  left: '+=50px'
}, 1000);

预定义动画 jQuery 提供了一些预设动画方法：

// 滑动效果
$('#panel').slideUp(300);
$('#panel').slideDown(300);

// 淡入淡出
$('#image').fadeIn();
$('#image').fadeOut();

样式操作最佳实践

性能优化 避免频繁操作样式，尽量使用类名切换而非直接修改 CSS 属性。

响应式处理 结合窗口大小事件动态调整样式：

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('.menu').addClass('mobile');
  } else {
    $('.menu').removeClass('mobile');
  }
});

现代替代方案 考虑使用 CSS 变量配合 jQuery 实现更灵活的样式控制：

// 设置 CSS 变量
$(':root').css('--theme-color', '#4285f4');

// 使用 CSS 变量
$('.header').css('background-color', 'var(--theme-color)');