©
本文档使用
php.cn手册 发布
直接向 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
在标准化 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 |
|
为了定义一个完整的 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 |
|
之后,您就可以在支持该属性的浏览器中使用 DOM (camel 式) 样式的写法或使用 CSS (带连字符号) 样式的写法来设置边框的半径了:
1 2 |
|
如果浏览器不支持任何一种形式的 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 |
|
默认情况下,通过 .css() 方法设置的值,jQuery 会为其加上 "px" 单位。您可以通过向 jQuery.cssNumber 对象中添加属性的方法来防止这种行为的发生。
1 |
|
通过向 jQuery.fx.step 对象中添加属性,cssHook 同样可以向 jQuery 的动画机制中添加钩子:
1 2 3 |
|
注意,上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性,返回值的类型以及动画的复杂性,可能需要在 cssHooks 写更多的代码。