jquery如何改变html标签的样式(两种实现方法)

想要使用 jQuery 改变 HTML 元素的样式，需要使用 css() 方法。这个方法可以帮助我们改变元素的内联样式，也可以修改嵌入样式表或外部样式表中的规则。总体来说，可以通过两种方式来改变 HTML 标签的样式。下面就详细介绍这两种实现方法。

一、使用 .css() 方法

使用 jQuery 的 .css() 方法可以轻松地改变 HTML 元素的样式。这个方法接收一个对象作为参数，对象的键名是 CSS 属性，键值是要设置的新值。

例如，想要将 <h1> 元素的字体颜色修改为红色，可以写如下代码：

$('h1').css('color', 'red');

这个代码将会找到页面中所有 <h1> 元素，并将它们的 color（颜色）属性设置为红色。如果想要设置多个 CSS 属性，可以在对象中添加更多键值对，如下所示：

$('h1').css({
  'color': 'red',
  'font-size': '32px',
  'text-decoration': 'underline'
});

这个代码将修改所有 <h1> 元素的字体颜色、字体大小和下划线样式。

二、使用 .addClass() 方法

可以使用 jQuery 的 .addClass() 方法添加一个或多个 CSS 类到一个元素身上。这样可以在 CSS 文件中定义一个或多个类，然后用 JavaScript 动态地将它们添加到 HTML 元素中。

例如，想要添加一个名为 highlight 的类到所有 <p> 元素中，可以使用下面的代码：

$('p').addClass('highlight');

这个代码将会找到页面中所有的 <p> 元素，并且为它们添加 highlight 类。在 CSS 中，可以定义 highlight 类的样式，如下所示：

.highlight {
  background-color: yellow;
  font-weight: bold;
}

这个 CSS 样式将应用到所有带有 highlight 类的元素上，因此所有添加了 highlight 类的 <p> 元素都会有黄色背景和加粗字体。

这两种方法都可以在 JavaScript 中动态地修改 HTML 元素的样式。使用 .css() 方法可以直接修改元素的单个属性，而使用 .addClass() 方法则能够添加一个或多个定义在 CSS 中的类，让样式属性更易于维护和修改。