1.​​css(name|pro|[,val|fn])​​ 1.9*


  • 访问匹配元素的样式属性。
  • ​​jQuery 1.8​​​中，当你使用CSS属性在​​css()​​​或​​animate()​​​中，我们将根据浏览器自动加上前缀(在适当的时候)，比如​​("user-select", "none")​​​; 在​​Chrome/Safari​​​浏览器中我们将设置为​​"-webkit-user-select"​​​, Firefox会使用​​"-moz-user-select"​​​, IE10将使用​​"-ms-user-select"​​.

参数

类型

描述

name

String

要访问的属性名称

name

Array

一个或多个CSS属性组成的一个数组

properties

Map

要设置为样式属性的名/值对

name,value

String, Number

属性名,属性值

name,function(index, value)

String,Function

1:属性名

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

//获取颜色、背景色
$("p").css(["color", "background" ]);//{ "color": "#ff0011", "background": "blue" } 

//逐渐增加div的大小
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

2.​​jQuery.cssHooks​​


  • 直接向​​jQuery​​​中添加钩子，用于覆盖设置或获取特定​​CSS​​​属性时的方法，目的是为了标准化​​CSS​​属性名或创建自定义属性。
  • ​​$.cssHooks​​​ 对象提供了一种通过定义函数来获取或设置特定 ​​CSS​​​ 值的方法。可以用它来创建新的 ​​cssHooks​​​ 用于标准化 ​​CSS3​​​ 功能，例如，盒子阴影​​（box shadows）​​​及渐变​​（gradients）​​。
  • 例如，某些基于 ​​Webkit​​​ 的浏览器会使用 ​​-webkit-border-radius​​​ 来设置对象的 ​​border-radius​​​，然而,早先版本的 ​​Firefox​​​ 则使用 ​​-moz-border-radius​​​。​​cssHook​​​ 就可以将这些不同的写法进行标准化，从而让 ​​.css()​​​ 可以使用统一的标准化属性名​​(border-radius​​​ 或对应的 ​​DOM​​​ 属性写法 ​​borderRadius​​)。
  • 该方法除了提供了对特定样式的处理可以采用更加细致的控制外，​​$.cssHooks​​​ 同时还扩展了 ​​.animate()​​ 方法上的属性集。
  • 定义一个新的 ​​cssHook​​​ 十分简单。下面的模板可以方便您创建自己的 ​​cssHook​​：

(function($) {
    // first, check to see if cssHooks are supported
    if ( !$.cssHooks ) {
      // if not, output an error message
      throw("jQuery 1.4.3 or above is required for this plugin to work");
      return;
    }
      $.cssHooks["someCSSProp"] = {
      get: function( elem, computed, extra ) {
        // handle getting the CSS property
      },      set: function( elem, value ) {
        // handle setting the CSS value 
     }
    };
  })(jQuery);

3.​​offset([coordinates])​​​ 与 ​​position()​​


  • 区别

  • ​​offset([coordinates])​​ 获取匹配元素在当前视口的相对偏移。
  • ​​position()​​ 获取匹配元素相对父元素的偏移。

  • 相同：返回的对象包含两个整型属性：​​top​​​ 和 ​​left​​，以像素计。此方法只对可见元素有效。

//get
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
//set
$("p:last").offset({ top: 10, left: 30 });

4.​​scrollTop([val])​​​与​​scrollLeft([val])​​


  • 区别

  • ​​scrollTop([val])​​ 获取匹配元素相对滚动条顶部的偏移。
  • ​​scrollLeft([val])​​ 获取匹配元素相对滚动条左侧的偏移。

  • 相同：此方法对可见和隐藏元素均有效。

//get
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
//set
$("div.demo").scrollTop(300);

5.​​width([val|fn])​​​ 与 ​​height([val|fn])​​


  • 区别

  • ​​width([val|fn])​​ 取得第一个匹配元素当前计算的宽度值（px）。
  • ​​height([val|fn])​​ 取得匹配元素当前计算的高度值（px）

  • 相同：在 ​​jQuery 1.2​​​ 以后可以用来获取 ​​window​​​ 和 ​​document​​ 的宽和高

$("p").height();
$("p").height(20);
//以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
    $("p").height(function(n,c){//接收元素的索引位置和元素旧的高度值作为参数。
        return c+10;
    });
});

6. ​​innerWidth()​​​ 与 ​​innerHeight()​​


  • 区别

  • ​​innerWidth()​​ 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。
  • ​​innerHeight()​​ 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

  • 相同：此方法对可见和隐藏元素均有效。

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

7.​​outerWidth([options])​​​ 与 ​​outerHeight([options])​​


  • 区别

  • ​​innerWidth()​​ 获取第一个匹配元素外部宽度（默认包括补白和边框）。
  • ​​innerHeight()​​ 获取第一个匹配元素外部高度（默认包括补白和边框）。

  • 相同：此方法对可见和隐藏元素均有效。

参数
  • options 设置为 true 时，计算边距在内。
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );