您现在的位置： 365建站网 > 建站教程 > jQuery 教程 > jQuery CSS 操作 - css() 方法

jQuery CSS 操作 - css() 方法

此节有 271 人学习过参与评论

实例

设置 <p> 元素的颜色：

</>code
$(".btn1").click(function(){
  $("p").css("color","red");
});

亲自试一试

定义和用法

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

返回 CSS 属性值

返回第一个匹配元素的 CSS 属性值。

注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。

</>code
$(selector).css(name)

参数	描述
name	必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

实例

取得第一个段落的 color 样式属性的值：

</>code
$("p").css("color");

亲自试一试

设置 CSS 属性

设置所有匹配元素的指定 CSS 属性。

</>code
$(selector).css(name,value)

参数	描述
name	必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。
value	可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。如果设置了空字符串值，则从元素中删除指定属性。

参数

描述

name

必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。

value

可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。

如果设置了空字符串值，则从元素中删除指定属性。

实例

将所有段落的颜色设为红色：

</>code
$("p").css("color","red");

亲自试一试

使用函数来设置 CSS 属性

设置所有匹配的元素中样式属性的值。

此函数返回要设置的属性值。接受两个参数，index 为元素在对象集合中的索引位置，value 是原先的属性值。

</>code
$(selector).css(name,function(index,value))

参数	描述
name	必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。
function(index,value)	规定返回 CSS 属性新值的函数。 index - 可选。接受选择器的 index 位置 oldvalue - 可选。接受 CSS 属性的当前值。

参数

描述

name

必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。

function(index,value)

规定返回 CSS 属性新值的函数。

index - 可选。接受选择器的 index 位置
oldvalue - 可选。接受 CSS 属性的当前值。

实例 1

将所有段落的颜色设为红色：

</>code
$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

亲自试一试

实例 2

逐渐增加 div 的宽度：

</>code
$("div").click(function() {
  $(this).css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

亲自试一试

设置多个 CSS 属性/值对

</>code
$(selector).css({property:value, property:value, ...})

把“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

参数	描述
{property:value}	必需。规定要设置为样式属性的“名称/值对”对象。该参数可包含若干对 CSS 属性名称/值。比如 {"color":"red","font-weight":"bold"}

参数

描述

{property:value}

必需。规定要设置为样式属性的“名称/值对”对象。

该参数可包含若干对 CSS 属性名称/值。比如 {"color":"red","font-weight":"bold"}

实例

</>code
$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

亲自试一试

jQuery CSS 操作参考手册

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (271人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

上一篇：jQuery 文档操作 - wrapInner() 方法
下一篇：jQuery CSS 操作 - height() 方法

jQuery 教程目录

jQuery CSS 操作 - css() 方法

实例

</>code

定义和用法

返回 CSS 属性值

</>code

实例

</>code

设置 CSS 属性

</>code

实例

</>code

使用函数来设置 CSS 属性

</>code

实例 1

</>code

实例 2

</>code

设置多个 CSS 属性/值对

</>code

实例

</>code

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询