jQuery CSS 操作 - css() 方法

最新推荐文章于 2024-08-16 17:20:49 发布

judyge

最新推荐文章于 2024-08-16 17:20:49 发布

阅读量1.7k

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 6 订阅

订阅专栏

本文介绍了jQuery中css()方法的多种用法，包括设置和获取样式属性值、使用回调函数动态调整样式等。同时，还探讨了如何利用addClass(), removeClass(), toggleClass()方法来管理元素的类名。

摘要由CSDN通过智能技术生成

实例

设置 <p> 元素的颜色：

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

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

});

亲自试一试

定义和用法

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

语法 1

返回第一个匹配元素的样式属性。

$(selector).css(name)

name 参数可以包含任何字符串类型的 CSS 属性名。比如 "color"：

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

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

亲自试一试

语法 2

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

$(selector).css(name,value)

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

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

亲自试一试

参数	描述
name	必需。规定 CSS 属性的名称。该参数可以包含任何字符串类型的 CSS 属性名。比如 "color"。如果只设置该参数，则该方法会返回第一个匹配元素的 CSS 属性的当前值。
value	可选。规定 CSS 属性的值。该参数可包含任何字符串类型的 CSS 属性值。比如 "red"。该参数只能与 name 参数一起使用。如果设置了 name 和 value 参数，则该方法将为所有匹配的元素设置指定的 CSS 属性和值。如果该参数的值是数字，则转换为像素值（除了 font-weight, line-height, opacity, z-index and zoom）。如果设置了空字符串值，则从元素中删除样式属性。

参数

描述

name

必需。规定 CSS 属性的名称。

该参数可以包含任何字符串类型的 CSS 属性名。比如 "color"。

如果只设置该参数，则该方法会返回第一个匹配元素的 CSS 属性的当前值。

value

可选。规定 CSS 属性的值。

该参数可包含任何字符串类型的 CSS 属性值。比如 "red"。

该参数只能与 name 参数一起使用。如果设置了 name 和 value 参数，则该方法将为所有匹配的元素设置指定的 CSS 属性和值。

如果该参数的值是数字，则转换为像素值（除了 font-weight, line-height, opacity, z-index and zoom）。

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

语法 3

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

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

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

逐渐增加 div 的宽度：

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

  $(this).css(

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

  );

});

亲自试一试

语法 4

$(selector).css({properties})

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

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

$("p").css({

  "color":"white",

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

  "font-family":"Arial",

  "font-size":"20px",

  "padding":"5px"

  });

亲自试一试

jQuery提供css()的方法来实现嵌入式改变元素样式，css()方法在使用上具有多样性。其中一种接受两个输入参数：样式属性和样式值，它们之间用逗号分开。比如我们要改变链接颜色，我们可以使用下面的代码：

$("#61dh a").css('color','#123456');
//这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。
//.css(‘color’,'#123456');表示把颜色设为'#123456'

如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下：

var divcss = {
  background: '#EEE',
      width: '478px',
      margin: '10px 0 0',
      padding: '5px 10px',
      border: '1px solid #CCC'
};
$("#result").css(divcss);
//这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。
//然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。

另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码：

$("#61dh a").css("color")
//和第一个例子相似，但是这里我们只传递一个参数(样式属性)

最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接，也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是，hover()方法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下：

$("#61dh a").css('color','#123456');
  $("#61dh a").hover(function(){
  $(this).css('color','#999');
  },
  function(){
  $(this).css('color','#123456');
});
//hover()方法的两个函数使用用逗号分隔

你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中，建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。

$(this).click(function(){
  if($(this).hasClass(“zxx_fri_on”)){
    $(this).removeClass(“zxx_fri_on”);
  }else{
    $(this).addClass(“zxx_fri_on”);
  }
  return false;
});

添加或去除元素集合的class name

1. 使用addClass()方法

addClass(names) 添加names指定的一个或多个class name给wrapped set。如果有多个name，使用空格分开，总之names是个字符串。

返回原来的wrapped set以进行JQuery链式操作。

注意：如果在添加的样式声明中有重复声明，谁的优先级更高呢？请参阅这里看CSS的权重分配。

2. 使用removeClass()方法

removeClass(names) 去除names指定的一个或多个class name。如果有多个names，使用空格分开。

返回原来的wrapped set以进行JQuery链式操作。

3. 使用toggleClass()方法

toggleClass(name) 这次只能有一个class name作为参数。如果该class已经存在，则去除之；如果没有则添加之。

返回原来的wrapped set以进行JQuery链式操作。

获取或设置CSS样式

1. 使用css(name, value)方法

这个方法用来设置css样式给wrapped set中的每一个元素。

name就是css样式的属性名称；

value可以是(string|number|function) ，类似于上节提到的attr(name, value)方法，value如果是function，则传给function的参数时元素在wrappsed set中的序号，function内部使用this指向正在被操作的Javascript DOM元素（够强）。function的返回值就是要设置的 css属性的值了。

比如：

$('div').css('font-size', function(n){
return (n+1)+'em';

});

将页面中div按照出现的顺序依次加大字体大小。

2. 使用css(properties)方法

参数properties是一个object，其中定义了class属性名称和值对。这样一次就可以进行多个css属性的设置了。

返回的依然是wrapped set以方便JQuery链式操作。

如：

$('div:eq(0)').css({

'font-size' : '2em',

'color' : '#cc00ff'

});

比较郁闷的是,这个Object的属性名必须用引号引起来作为一个字符串，否则是不能被浏览器识别的，attr()类似的方法就无需这样。

同样Object中也可以包含function,如：

    $('div').css({
       'font-size': function(n)
           {
               return (n+2) + 'em';
           }

});

3. 使用css(name)方法

这个方法返回由name指定的css 属性的值，返回的值是一个字符串，因此有些情况需要转换一下。这个方法只能返回wrapped set中第一个元素的指定css属性值。

如：$('#firstDiv').css('font-size')可能返回一个字符串 '16PX'。

顺便说一下，如果想得到指定元素的class名称（如果指定的话），使用Javascript标准方法，如：

$('#firstDiv')[0].className

4.使用width()和height()方法

1）不带参数的width()和height()方法返回wrapped set中第一个元素的宽和高，这里直接返回一个number（单位为px），无需从字符串转换了。

2) 带参数的witdh(value)和height(value) 给wrapped set中每个元素指定由value表示的宽高。返回wrapped set。

value的值可以是number或者是字符串。如果是number则单位是px。

如：$('div').width(600); //600px

$('div') .width('400mm'); //400mm

hasClass(name)方法

判断wrapped set中是否有任何一个元素包含了name指定的class name, name也可以是一个用空格分开的多个class names组成的字符串。返回true | false;

注意：class name和class property name的区别：

-- class name指定义style的css名称，一个style定义会包含很多class property.比如定义一个叫 ownStyle的样式。

-- class property name指css规范中的css属性名。比如 font-size,color等等。

如果想得到一个元素的所有class names，使用attr('className')方法或者Javascript DOM属性className。注意在分割返回的字符串时，首先判断字符串是否为空。如：

$.fn.getClassNames = function() {
     if (name = this.attr("className")) {
         return name.split(" ");
    }
     else {
         return [];
    }
};

这段代码为JQuery添加了扩展函数getClassNames()用来得到元素的class name数组。