描述: 直接向 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
|
|
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
|
|
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
|
|
然后,您可以在支持的浏览器中使用DOM(驼峰)样式或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
27
28
29
30
|
|
Special units(特殊单位)
默认情况下,传递给.css()
方法的值,jQuery添加一个“px”单位。可以通过jQuery.cssNumber
对象中添加属性的方法,来防止这种行为的发生
1
|
|
Animating with cssHooks(cssHooks动画)
通过向 jQuery.fx.step
对象中添加属性,cssHook 同样可以向 jQuery 的动画机制中添加钩子:
1
2
3
|
|
注意,上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性,返回值的类型以及动画的复杂性,可能需要在 cssHooks 写更多的代码。
转载请注明:悠然品鉴 » jQuery .cssHooks 用法 手册 | 示例代码