# jQuery.cssHooks

所属分类：CSS 英文文档：jQuery.cssHooks

## jQuery.cssHooks 返回: Object

描述: 直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。

- #### 添加的版本: 1.4.3jQuery.cssHooks

`$.cssHooks` 对象提供了一种方法通过定义函数来获取和设置特定的CSS值的方法。 它也可以被用来创建新的cssHooks以标准化CSS3功能，如框阴影和渐变。

例如，某些版本基于Webkit的浏览器需要`-webkit-border-radius`属性来设置元素的`border-radius`，而早期的Firefox版本使用`-moz-border-radius`属性。一个CSS hook 可以标准化这些供应商前缀的属性，让`.css()` 接受一个单一的，标准的属性的名称（`border-radius`，或用DOM属性的语法，`borderRadius`）。

除了提供了对特定样式的处理可以采用更加细致的控制外， `$.cssHooks`也扩展了`.animate()` 方法上可用的属性。

定义一个新的css hook十分简单。下面的模板可以方便您创建自己的 cssHook：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
    (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;  }   // Wrap in a document ready call, because jQuery writes  // cssHooks at this time and will blow away your functions  // if they exist.  $(function () {    $.cssHooks["someCSSProp"] = {      get: function( elem, computed, extra ) {        // handle getting the CSS property      },      set: function( elem, value ) {        // handle setting the CSS value      }    };  });})(jQuery);

#### Feature Testing（功能测试）

在使供应商特定的CSS属性标准化前，首先要确定浏览器是否支持标准的属性 或 带浏览器供应商前缀的变种。例如，检查支持`border-radius` 属性，还要检查该属性的任何变种写法是否是临时元素的 `style` 对象中的成员。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
    (function($) {  function styleSupport( prop ) {    var vendorProp, supportedProp,         // capitalize first character of the prop to test vendor prefix        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),        prefixes = [ "Moz", "Webkit", "O", "ms" ],        div = document.createElement( "div" );     if ( prop in div.style ) {       // browser supports standard CSS property name      supportedProp = prop;    } else {       // otherwise test support for vendor-prefixed property names      for ( var i = 0; i < prefixes.length; i++ ) {        vendorProp = prefixes[i] + capProp;        if ( vendorProp in div.style ) {          supportedProp = vendorProp;          break;        }      }    }     // avoid memory leak in IE    div = null;     // add property to $.support so it can be accessed elsewhere    $.support[ prop ] = supportedProp;     return supportedProp;  }   // call the function, e.g. testing for "border-radius" support:  styleSupport( "borderRadius" );})(jQuery);

#### Defining a complete css hook（定义一个完整的css hook）

要定义一个完整的cssHook，首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法，此外，还要结合上面提到的例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
    (function($) {  if ( !$.cssHooks ) {    throw("jQuery 1.4.3+ is needed for this plugin to work");    return;  }   function styleSupport( prop ) {    var vendorProp, supportedProp,        capProp = prop.charAt(0).toUpperCase() + prop.slice(1),        prefixes = [ "Moz", "Webkit", "O", "ms" ],        div = document.createElement( "div" );     if ( prop in div.style ) {      supportedProp = prop;    } else {      for ( var i = 0; i < prefixes.length; i++ ) {        vendorProp = prefixes[i] + capProp;        if ( vendorProp in div.style ) {          supportedProp = vendorProp;          break;        }      }    }     div = null;    $.support[ prop ] = supportedProp    return supportedProp;  }   var borderRadius = styleSupport( "borderRadius" );   // Set cssHooks only for browsers that  // support a vendor-prefixed border radius  if ( borderRadius && borderRadius !== "borderRadius" ) {    $.cssHooks.borderRadius = {      get: function( elem, computed, extra ) {        return $.css( elem, borderRadius );      },      set: function( elem, value) {        elem.style[ borderRadius ] = value;      }    };  }})(jQuery);

然后，您可以在支持的浏览器中使用DOM（驼峰）样式或CSS（连字符号）的风格设置边框半径：

1 2 |
    $("#element").css("borderRadius", "10px");$("#another").css("border-radius", "20px");

如果浏览器不支持任何形式的CSS属性写法，并且也不支持任何前缀写法，那么该样式是不会应用到元素上的。但是，如果浏览器支持某种特殊的写法，那么可以在 cssHooks 中添加对该特殊用法的支持。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
     (function($) {  // feature test for support of a CSS property  // and a proprietary alternative  // ...   if ( $.support.someCSSProp && $.support.someCSSProp !== "someCSSProp" ) {     // Set cssHooks for browsers that    // support only a vendor-prefixed someCSSProp    $.cssHooks.someCSSProp = {      get: function( elem, computed, extra ) {        return $.css( elem, $.support.someCSSProp );      },      set: function( elem, value) {        elem.style[ $.support.someCSSProp ] = value;      }    };  } else if ( supportsProprietaryAlternative ) {    $.cssHooks.someCSSProp = {      get: function( elem, computed, extra ) {        // Handle crazy conversion from the proprietary alternative      },      set: function( elem, value ) {        // Handle crazy conversion to the proprietary alternative      }    }  } })(jQuery);

#### Special units（特殊单位）

默认情况下，传递给`.css()` 方法的值，jQuery添加一个“px”单位。可以通过`jQuery.cssNumber`对象中添加属性的方法，来防止这种行为的发生

1 |
    $.cssNumber["someCSSProp"] = true;

#### Animating with cssHooks（cssHooks动画）

通过向 `jQuery.fx.step` 对象中添加属性，cssHook 同样可以向 jQuery 的动画机制中添加钩子：

1 2 3 |
    $.fx.step["someCSSProp"] = function(fx){  $.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );};

注意，上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性，返回值的类型以及动画的复杂性，可能需要在 cssHooks 写更多的代码。