javascript - .css() 会自动添加 vendor 前缀吗？

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 文档中所示)或通过完全删除 vendor 前缀版本来改进这样的行。

当更改元素的 CSS 属性时，jQuery 的 .css() 方法是否自动应用任何所需的 vendor 前缀？

Answer 1

正如@zeroflagL 所写，自 jQuery 1.8.0 以来 .css() 确实添加了浏览器特定的前缀(see this)。

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

来自 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);