jQuery.cssHooks

类别: CSS

jQuery.cssHooks返回: 对象

描述: 直接挂钩到 jQuery，以覆盖特定 CSS 属性的获取或设置方式，规范化 CSS 属性命名，或创建自定义属性。

  • 版本添加: 1.4.3jQuery.cssHooks

$.cssHooks 对象提供了一种方法来定义用于获取和设置特定 CSS 值的函数。它还可以用于为规范化 CSS3 特性（如阴影和渐变）创建新的 cssHooks。

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

除了提供对特定样式属性处理方式的细粒度控制外，$.cssHooks 还扩展了 .animate() 方法可用的属性集。

定义新的 css 挂钩非常简单。下面的骨架模板可以作为创建您自己的挂钩的指南。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
(function( $ ) {
 
// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}
 
// 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 );

特性测试

在规范化供应商特定的 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
38
 
(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", "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 );

定义完整的 css 挂钩

要定义完整的 css 挂钩，请将支持测试与第一个示例中提供的填充版本骨架模板结合起来

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( new Error( "jQuery 1.4.3+ is needed for this plugin to work" ) );
}
 
function styleSupport( prop ) {
  var vendorProp, supportedProp,
    capProp = prop.charAt( 0 ).toUpperCase() + prop.slice( 1 ),
    prefixes = [ "Moz", "Webkit", "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
 
(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 );

特殊单位

默认情况下，jQuery 会在传递给 .css() 方法的值中添加一个 "px" 单位。可以通过将属性添加到 jQuery.cssNumber 对象来阻止这种行为。

1
 
$.cssNumber.someCSSProp = true;

使用 cssHooks 进行动画

css hook 还可以通过将属性添加到 jQuery.fx.step 对象中来挂钩到 jQuery 的动画机制。

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

请注意，这最适合简单的数值动画。根据 CSS 属性、它返回的值类型以及动画的复杂性，可能需要更多自定义代码。