.css（）会自动添加供应商前缀吗？

我有一些代码：

$("#" + 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的文档中所示）或通过彻底删除供应商前缀版本来改进这样的行。

jQuery的.css()方法是否会在更改元素的CSS属性时自动应用任何必需的供应商前缀？

Answer 1

正如@zeroflagL写道，似乎是因为jQuery 1.8.0 .css()确实添加浏览器特定的前缀（ 见这个 ）。

在早期版本中，这不是由jQuery的.css()自动完成的。 你将不得不自己做，或者你可以使用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; } // 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); 

Answer 2

jQuery确实添加了供应商前缀。 它首先检查是否存在标准属性，以及是否找不到供应商的前缀版本。 来源：

 // return a css property mapped to a potentially vendor prefixed property function vendorPropName( style, name ) { // shortcut for names that are not vendor prefixed if ( name in style ) { return name; } // check for vendor prefixed names ... 

我不知道从哪个版本，但我认为1.8。

Answer 3

这现在在官方文档中得到确认： http : //api.jquery.com/css/

Setter（ .css( propertyName, value ) ）

从jQuery 1.8开始， .css()设置器会自动处理属性名称的前缀。 例如，在Chrome / Safari中将.css( "user-select", "none" )设置为-webkit-user-select ，Firefox将使用-moz-user-select ，IE10将使用-ms-user-select 。

Getter（ .css( propertyName ) ）

.css()方法是从第一个匹配的元素中获取计算样式属性的一种便捷方式，尤其是考虑到浏览器访问大多数属性的不同方式getComputedStyle()基于标准的浏览器中的getComputedStyle()方法与currentStyle和版本9之前的Internet Explorer中的runtimeStyle属性）以及浏览器对某些属性使用的不同术语。 例如，Internet Explorer的DOM实现将float属性称为styleFloat ，而符合W3C标准的浏览器将其称为cssFloat 。 为了保持一致性，您可以简单地使用"float" ，jQuery会将其翻译为每个浏览器的正确值。

它没有在getter上下文中明确提到供应商前缀，但是很容易testing。 例如，Chrome上的$element.css('border-radius')将返回设置为border-radius或-webkit-border-radius值，并忽略设置为-moz-border-radius 。

请记住，在速记属性的浏览器中它是不一致的：

检索速记CSS属性（例如，边距，背景，边框）虽然在某些浏览器中有效，但不能保证。 例如，如果要检索呈现的border-width ，请使用： $( elem ).css( "borderTopWidth" ) ， $( elem ).css( "borderBottomWidth" )等等。