在本教程中，我们将学习使用jQuery样式化DOM。

css()方法

要向任何页面添加样式，我们使用CSS(级联样式表)文件。
jQuery为我们提供了css()方法，可用于设置HTML元素的样式。

在本教程中，我们将介绍一些用于设置元素样式的样式属性。

单击此处获取CSS教程。

设置单一样式属性

要设置一个样式属性，我们将属性和值用引号传递给css()方法。

在以下示例中，我们将页面中所有段落的color属性设置为#111。

$("p").css("color", "#111");

设置多个样式属性

要设置多个样式属性，我们将一个对象传递给css()方法。

在下面的示例中，我们将所有具有类容器的div元素的font-size设置为16px，将background-color属性设置为#fff。

$("div.container")
  .css({
    "font-size": "16px",
    "background-color": "#fff"
  });

获得CSS的值

我们还可以使用css()方法来获取为任何元素的任何给定属性设置的值。

在下面的示例中，我们将获取id为username的div元素的color属性设置的值。

var color = $("#username").css("color");

可变颜色将保留所选div的color属性值。

如果选择器选择了多个元素，则css()方法将不会为所有元素返回值。

这不会给出正确的结果。

console.log( $("div").css("color") );

如果以上代码选择的div大于1，则css方法将仅返回第一个选定元素的颜色值。

使用类为元素设置样式

通常，我们在样式表中保存了一堆样式规则。
通常，通过将类添加到任何元素来应用样式。

例如，如果我们使用Twitter Bootstrap框架，则可以使用text-center类轻松地将div中的文本对齐到中心。

设置样式示例

可以说，我们的页面中包含以下示例样式表。

//file: style.css
.bg-lightyellow {
	background-color: lightyellow;
}

.bg-salmon: {
	background-color: salmon;
}

.color-black: {
	color: black;
}

.color-white: {
	color: white;
}

我们为背景颜色和颜色定义了四个类。
如果我们将类添加到任何元素，则相应的样式规则将应用于该元素。

新增类

假设我们要向ID为" sample-div1"的div添加背景色" lightyellow"。

为了达到这个目的，我们可以简单地通过使用addClass()方法并传递类值来添加" bg-lightyellow"类。

$("#sample-div1").addClass("bg-lightyellow");

删除类

类似地，我们可以使用removeClass()方法从元素中删除类。

在以下示例中，我们从ID为" sample-div1"的元素中删除" bg-lightyellow"类。

$("#sample-div1").removeClass("bg-lightyellow");

是否包含类

我们甚至可以通过使用hasClass()方法检查元素是否具有给定的类。

在下面的示例中，我们正在检查ID为" sample-div1"的元素是否具有" bg-salmon"类。

console.log( $("#sample-div1").hasClass("bg-salmon") );

如果存在该类，则上面的代码将输出" true"，否则将输出" false"。

切换类

我们也可以使用toggleClass()方法切换给定元素的任何类。

在下面的代码中，如果未将类别为id的元素" sample-div1"添加到类别" color-black"，则该类别将为" color-black"。
并且，如果已经添加了该类，则将其从元素中删除。

$("#sample-div1").toggleClass("color-black");

显示和隐藏元素

这是一个常见的要求。
我们可能必须使用CSS在页面中显示或者隐藏元素。
我们可以使用display属性并将其值设置为none。
或者，我们可以使用jQuery提供的show()和hide()方法。

在下面的示例中，我们隐藏了一个ID为" sample-div1"的元素。

$("#sample-div1").css("display", "none");

我们可以使用" hide()"方法达到相同的结果。

$("#sample-div1").hide();

类似地，我们可以使用css()方法显示任何隐藏的元素。

$("#sample-div1").css("display", "block");

或者，我们可以使用show()方法获得相同的结果。

$("#sample-div1").show();

我们还可以使用visibility属性来隐藏和显示元素。