首页课程jQuery-Spaßkurs模块三:操作CSS

模块三:操作CSS

目录列表

添加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")


将代码补充完整,将类名“text”和“menu”添加到&lt;p&gt;元素。

"p").addClass(" ");

删除CSS删除CSS

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

例如:

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

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

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


正确填空

<p class="a b"></p>的class在执行下列代码以后会是

切换CSS

切换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");
  });
});

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


执行完一下代码,<p>标签还有边框 , <style> .test { border-style: solid;}</style><p class="test">Some text</p> $(".test").removeClass("test");