Question

我有一些代码：

$("#" + 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属性时，jQuery的.css()方法是否会自动应用任何必需的供应商前缀？

Answer 1

正如@zeroflagL所写，似乎因为jQuery 1.8.0 .css()确实添加了浏览器特定的前缀（see this）。

在早期版本中，这不是由jQuery的.css()自动完成的。您必须自己完成，或者您可以使用jQuery的.cssHooks()添加供应商前缀。

来自here的代码示例：

(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 DOES添加供应商前缀。它首先检查是否存在标准属性，以及是否找不到供应商前缀版本。来自消息来源：

// 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() setter将自动处理属性名称的前缀。例如，在Chrome / Safari中取.css( "user-select", "none" )将其设置为-webkit-user-select，Firefox将使用-moz-user-select，IE10将使用-ms-user-select。

Getter（`.css( propertyName )`）

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

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

请记住，不同浏览器之间的速记属性不一致：

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

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

3 个答案:

Setter（`.css( propertyName, value )`）

Getter（`.css( propertyName )`）

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

3 个答案:

Setter（.css( propertyName, value )）

Getter（.css( propertyName )）

Setter（`.css( propertyName, value )`）

Getter（`.css( propertyName )`）