jquery 操作css样式、位置、尺寸方法汇总

当使用 jQuery 操作 DOM 元素时，修改 CSS 样式、位置和尺寸是非常常见的需求，本文将会详细讲解 jQuery 如何操作 DOM 元素的这些属性。

操作 CSS 样式

添加样式类

使用 jQuery 的 addClass() 方法可以向目标元素添加一个或多个 CSS 类。例如：

$('#my-ele').addClass('highlight');

上面的代码会将 my-ele 元素添加 highlight 类，从而为元素添加了高亮效果。

移除样式类

使用 jQuery 的 removeClass() 方法可以从目标元素中移除一个或多个 CSS 类。例如：

$('#my-ele').removeClass('highlight');

上面的代码会将 my-ele 元素中的 highlight 类删除，从而取消元素的高亮效果。

切换样式类

使用 jQuery 的 toggleClass() 方法可以在目标元素上切换一个或多个 CSS 类。例如：

$('#my-ele').toggleClass('highlight');

上面的代码会在 my-ele 元素上添加 highlight 类，如果该类已经存在，则该类会被删除。

修改样式属性

使用 jQuery 的 css() 方法可以获取或设置指定元素的任何 CSS 属性值。例如：

$('#my-ele').css('background-color', 'red');

上面的代码将会将 my-ele 元素的背景色设置为红色。

操作元素位置和尺寸

获取位置和尺寸

使用 jQuery 的 offset() 方法可以获取目标元素的相对于页面原点的坐标位置，例如：

var position = $('#my-ele').offset();
console.log(position.left, position.top);

上面的代码会打印输出 my-ele 元素的 left 和 top 坐标位置。

使用 jQuery 的 width() 和 height() 方法可以获取目标元素的宽度和高度，例如：

var width = $('#my-ele').width();
var height = $('#my-ele').height();
console.log(width, height);

上面的代码会打印输出 my-ele 元素的宽度和高度。

设置位置和尺寸

使用 jQuery 的 offset() 方法可以设置目标元素相对于页面原点的坐标位置，例如：

$('#my-ele').offset({left: 100, top: 50});

上面的代码将会将 my-ele 元素移动到 left: 100, top: 50 的位置上。

使用 jQuery 的 width() 和 height() 方法可以设置目标元素的宽度和高度，例如：

$('#my-ele').width(100).height(50);

上面的代码将会将 my-ele 元素的宽度设置为 100，高度设置为 50。

示例

以下是一个实际的示例，展示如何使用 jQuery 操作 CSS 样式和位置尺寸。

HTML 代码：

<div class="box"></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  background-color: gray;
}

jQuery 代码：

$(function() {
  $('.box').click(function() {
    $(this).css('background-color', 'red');
  }).hover(function() {
    $(this).addClass('highlight');
  }, function() {
    $(this).removeClass('highlight');
  });

  $(window).resize(function() {
    var winWidth = $(window).width();
    var winHeight = $(window).height();
    $('.box').offset({left: winWidth / 2 - 50, top: winHeight / 2 - 50});
  });
});

上面的代码会为 .box 元素添加点击和鼠标移入移出事件，点击元素时将元素背景色设置为红色，鼠标移入元素时添加 highlight 类，鼠标移出时移除该类。同时，当窗口大小发生改变时，会将 .box 元素的位置设置为窗口中心。