jQuery操作CSS

目录

1 添加CSS

2 删除CSS

3 切换CSS

4 CSS()方法

5 CSS()多属性设置

6 带边距的外形尺寸

---

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

2 删除CSS

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

例如：

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

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

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

3 切换CSS

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

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

HTML:

<p>一些文本</p>
<button>切换类</button>

CSS:

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

JS:

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

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

4 CSS()方法

与 html() 方法类似，可以使用 css() 方法来获取和设置CSS属性值。

例如：

HTML:

<p>一些文本</p>

CSS:

p {
  background-color:red;
  color: white;
}

JS:

$(function() {
  alert($("p").css("background-color"));
  $("p").css("background-color", "blue");
}); 

上面的代码弹出获取的段落 background-color 属性值，然后将其值设置为blue。

5 CSS()多属性设置

css（） 方法可以使用  json 语法设置多个CSS属性。

语法：

css({"property":"value","property":"value",...});

语法由“属性”：“值”对组成，以逗号分隔，并以大括号{}括起来。

例如：

$("p").css({"color": "red", "font-size": "200%"});

这将设置预设的颜色和字体大小属性。

你可以使用此JSON语法指定任意数量的属性。

 外形尺寸

可以使用 width() 和 height() 方法来获取和设置HTML元素的宽度和高度。

下面代码中我们将div的宽度和高度设置为100px，并为其设置背景颜色：

$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);

6 带边距的外形尺寸

width() 和 height() 方法获取并设置尺寸，而不包括填充，边框和边距。

innerWidth()和innerHeight()方法包括填充部分的尺寸。

outerWidth()和outerHeight()方法包括填充和边框部分的尺寸。

查看这张图片了解他们的工作原理：

 

以下示例演示了该方法的工作原理：

HTML：

<div></div>

CSS:

div {
  width: 300px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 3px solid blue;
  background-color: red;
  color: white;
}

JS:

$(function() {
  var txt = "";
  txt += "width: " + $("div").width() + " ";
  txt += "height: " + $("div").height() + "<br/>";
  txt += "innerWidth: " + $("div").innerWidth() + "  ";
  txt += "innerHeight: " + $("div").innerHeight() + "<br/>";
  txt += "outerWidth: " + $("div").outerWidth() + "  ";
  txt += "outerHeight: " + $("div").outerHeight();
    
  $("div").html(txt);
});