[转帖] jquery之修改元素样式(获取和设置样式,使用css(),width(),height()方法)

转自：http://blog.csdn.net/fhd001/article/details/6309579

jquery之修改元素样式(获取和设置样式,使用css(),width(),height()方法)

----------

 

虽然修改元素class特性允许从样式表已定义样式中选择一组预定样式加以应用，但有时我们却想完全覆盖样式表。直接在元素上应用样式将自动覆盖样式表，使我们能够对单独元素及其样式施加更细化的控制。

css()语法1:

css(name,value)

设置指定的值到每个已匹配元素的指定的CSS样式属性

参数

name  (字符串)将要设置的CSS属性名称

vaule (字符串|数字|函数)一个包含属性值的字符串，数字或函数。如果传递函数作为参数。则为包装集各元素分别调用函数，以函数返回值作为CSS属性值。每次函数调用的this属性，设置为当前正在计算的元素。

如例：

 

$("div.expandable").css("width",function(){
  return $(this).width() +20 + "px";
});

 

 

----------

 

css()语法2：

css(properties)

为所有已匹配元素设置已传递对象里多个键所指定的CSS属性为相关的值。即把一个"名称/值对"对象的属性设置为所有已匹配元素的样式属性。

参数

properties  (对象)指定一个对象，对象的属性被复制为包装集里所有元素的CSS属性。

就像attr()命令的快捷版本那样，可以使用函数作为properties参数对象里的任何CSS属性值。jquery为包装集各元素分别调用函数，确定将要应用的属性值。

----------

 

我们可以为css()传入名称，以便获取与该名称相关联的属性的已计算样式。当我们说已计算样式时，意思是指所有链接、嵌入和内联的css都已应用之后的样式。

css()语法3：

css(name)

获取包装集里第一个元素name所指定CSS属性的已计算样式值。

参数

name  (字符串)指定一个CSS属性名称。返回它的已计算样式值。

返回

已计算样式值 

切记css()命令的这个重要变体总是返回字符串，所以如果你需要数字或其他类型，就必须对返回的字符串进行解析。

----------

对于经常存取的一组css值，jquery体贴地提供了方便的命令。如，我们可以通过width()和height()命令获取(或设置)元素的宽度和高度的数值，为了设置宽度或高度，语法如下：

width()和height()语法1：

width(value)

height(value)

对匹配集里所有元素设置指定的宽度或高度

参数

value   (数值)将要设置的值，以像素为单位。

切记这两个函数是更为详细的css()函数的快捷方式，所以

$("div.myElements").width(500)

 

等效于

$("div.myElements").css("width","500px");

 

----------

获取宽度与高度的语法

width()和height()语法2：

width()

height()

获取包装集的第一个元素的宽度或高度

返回

已计算的宽度或高度，以数字类型返回