Module 3: Manipulating CSS

添加CSS

addClass（）方法为选定的元素添加一个或多个类。

例如:

HTML:

<div>Some text</div>
CSS:
.header {   color: blue;   font-size:x-large; }

JS:

$("div").addClass("header");

上面的代码分配了div元素的类“header”。

要在addClass()方法中指定多个类,只需使用空格分隔它们。 例如$("div").addClass("class1 class2 class3")

removeClass（）方法从所选元素中删除一个或多个类名。

例如：

$("div").removeClass("red");

上面的代码从div元素中删除类“red”。

同样，可以通过使用空格分隔来指定多个类名。

切换css

toggleClass（）方法在从所选元素添加/删除类之间切换，这意味着如果元素指定的类存在，则它将被删除，如果不存在，则会被添加。

为了演示此操作，我们将处理一个按钮单击事件来切换一个类。 我们将在未来的模块中更多地了解事件及其语法。

HTML:

<p>Some text</p>
<button>Toggle Class</button>

CSS:

.red { 
  color:red; 
  font-weight: bold;
}

JS:

$(function() {
  $("button").click(function() {
    $("p").toggleClass("red");
  });
});

上面的代码在点击按钮时切换类名“红色”。