38

我有一些代码：

$("#" + 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 属性时会自动应用任何必需的供应商前缀吗？

4

3 回答 3

52

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

在早期版本中，这不是由 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);
于 2013-07-05T11:22:16.543 回答
11

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。

于 2013-07-05T14:05:33.053 回答
7

现在在官方文档中确认了这一点：http: //api.jquery.com/css/

二传手 ( .css( propertyName, value ))

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

吸气剂 ( .css( propertyName ) )

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

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

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

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

于 2016-09-14T22:06:43.817 回答