jQuery.cssHooks

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

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

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

（定义一个完整的css hook）​

(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_x( "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);