我有一些代码:
$("#" + this.id).css("border-radius",this.radius + "px"); $("#" + this.id).css("-moz-border-radius",this.radius + "px"); $("#" + this.id).css("-webkit-border-radius",this.radius + "px");
我正在尝试通过使用JSON来应用这样的行(如jQuery文档中所示)或完全删除供应商前缀版本来改善此类行。
.css()更改元素上的CSS属性时,jQuery的方法是否自动应用任何必需的供应商前缀?
.css()
正如@zeroflagL所写,自jQuery1.8.0起.css()确实添加了浏览器特定的前缀。
在早期版本中,jQuery不会自动完成此操作.css()。您将必须自己完成操作,也可以使用jQuery.cssHooks()来添加供应商前缀。
.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; } // check for style support of your property // TODO by user: swap out myCssPropName for css property var myCssPropName = styleSupport("myCssPropName"); // set cssHooks only for browsers that // support a vendor-prefixed border radius if (myCssPropName && myCssPropName !== 'myCssPropName') { $.cssHooks["myCssPropName"] = { get: function(elem, computed, extra) { // handle getting the CSS property return $.css(elem, myCssPropName); }, set: function(elem, value) { // handle setting the CSS value elem.style[myCssPropName] = value; } }; } })(jQuery);