jQuery css方法动态修改CSS属性

时间:2020-11-11 19:08:38 jQuery Mobile 我要投稿

jQuery css方法动态修改CSS属性

  定义和用法

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

  返回 CSS 属性值

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

  注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。

  复制代码 代码如下:

  $(selector).css(name)

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

  实例

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

  复制代码 代码如下:

  $("p").css("color");

  设置 CSS 属性

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

  复制代码 代码如下:

  $(selector).css(name,value)

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

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

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

  实例

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

  复制代码 代码如下:

  $("p").css("color","red");

  使用函数来设置 CSS 属性

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

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

  复制代码 代码如下:

  $(selector).css(name,function(index,value))

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

  复制代码 代码如下:

  function(index,value)

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

  index - 可选。接受选择器的 index 位置

  oldvalue - 可选。接受 CSS 属性的当前值。

  实例 1

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

  复制代码 代码如下:

  $("button").click(function(){

  $("p").css("color",function(){return "red";});

  });

  实例 2

  逐渐增加 div 的宽度:

  复制代码 代码如下:

  $("div").click(function() {

  $(this).css(

  "width", function(index, value) {return parseFloat(value) * 1.2;}

  );

  });

  设置多个 CSS 属性/值对

  复制代码 代码如下:

  $(selector).css({property:value, property:value, ...})

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

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

  {property:value}

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

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

  实例

  复制代码 代码如下:

  $("p").css({

  "color":"white",

  "background-color":"#98bf21",

  "font-family":"Arial",

  "font-size":"20px",

  "padding":"5px"

  });

【jQuery css方法动态修改CSS属性】相关文章:

1.jQuery设置CSS属性的示例及介绍

2.css属性定位教程

3.关于网页图片属性的CSS教程

4.关于CSS border虚线边框属性教程

5.CSS3圆角属性教程

6.CSS实用教程:CSS命名

7.CSS教程设置文本属性和字体间距的方法详解

8.css 书写技巧 CSS 技巧教程简介