jQuery - 获取并设置 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

1.返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

实例：$("p").css("background-color");

2.设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

实例：$("p").css("background-color","yellow");

3.设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

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

下面的例子将为所有匹配元素设置 background-color 和 font-size：

实例：$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery height() 方法

取得匹配元素当前计算的高度值(px)；或用于设置高度。

在 jQuery 1.2 以后可以用来获取 window 和 document 的高

1.获取第一段的高

jQuery 代码:  $("p").height();

2.把所有段落的高设为 20:

jQuery 代码:  $("p").height(20);

3.以 10 像素的幅度增加 p 元素的高度

jQuery 代码:
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

jQuery width() 方法

取得第一个匹配元素当前计算的宽度值(px); 或用于设置宽度。

在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

1.获取第一段的宽

jQuery 代码：$("p").width();

2.把所有段落的宽设为 20:

jQuery 代码: $("p").width(20);

3.以 10 像素的幅度增加 p 元素的宽度

jQuery 代码:
  $("button").click(function(){
    $("p").width(function(n,c){
    return c+10;
    });
  });