jQuery jQuery.cssHooks 方法
最后更新于:2022-03-27 02:08:32
jQuery jQuery.cssHooks 方法
实例
定义一个新的css hook
$(function ($) {
//首先检查jquery版本是否支持 cssHooks
if (!$.cssHooks){
//如果不支持输出错误提醒
throw(new Error("该功能需要jQuery版本大于或等于1.4.3"));
}
$(function(){
$.cssHooks.height = {
get: function( elem, computed, extra ) {
// 处理获取该CSS属性
},set: function( elem, value ) {
// 处理设置CSS属性
alert(‘执行处理‘);
}
};
$(‘body‘).css(‘height‘,‘100%‘);
});
})(jQuery)
//首先检查jquery版本是否支持 cssHooks
if (!$.cssHooks){
//如果不支持输出错误提醒
throw(new Error("该功能需要jQuery版本大于或等于1.4.3"));
}
// 封装在Dom文档加载完毕的事件里, 要再这个时候写入cssHooks,避免该cssHooks在其他地方被重写
$(function(){
$.cssHooks.height = {
get: function( elem, computed, extra ) {
// 处理获取该CSS属性
},set: function( elem, value ) {
// 处理设置CSS属性
alert(‘执行处理‘);
}
};
$(‘body‘).css(‘height‘,‘100%‘);
});
})(jQuery)
定义和用法
$.cssHooks 提供了一种方法通过定义函数来获取和设置特定的CSS值。
注意:1. 它的目的是为了标准化 CSS 属性名或创建自定义属性。
2. 例如,某些版本基于Webkit的浏览器需要-webkit-border-radius属性来设置元素的border-radius,
而早期的Firefox版本使用-moz-border-radius属性。一个CSS hook 可以标准化这些有前缀的属性,
让.css() 接受一个单一的,标准的属性的名称(border-radius,或用DOM属性的语法,borderRadius)。
语法
$.cssHooks
更多实例
测试浏览器供应商前缀的变种
在使供应商特定的CSS属性标准化前,首先要确定浏览器是否支持标准的属性或带浏览器供应商前缀的变种。
定义一个完整的css hook
定义一个完整的css hook。