这篇“这么定义一个完整的css hook”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“这么定义一个完整的css hook”文章吧。
要定义一个完整的cssHook,首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法,此外,还要结合上面提到的例子:
(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( "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(连字符号)的风格设置边框半径:
$("#element").css("borderRadius", "10px");
$("#another").css("border-radius", "20px");
以上就是关于“这么定义一个完整的css hook”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。