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()、ブラウザー固有のプレフィックスが追加されているようです (これを参照)。

以前のバージョンでは、これは 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 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だと思います。

于 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のcurrentStyleおよびプロパティ) を考慮すると、 runtimeStyle) と、ブラウザーが特定のプロパティに使用するさまざまな用語。たとえば、Internet Explorer の DOM 実装では float プロパティを としてstyleFloat参照しますが、W3C 標準準拠のブラウザでは として参照しますcssFloat。一貫性を保つために、単純に を使用できます"float"。jQuery はそれを各ブラウザーの正しい値に変換します。

getter コンテキストでベンダー プレフィックスについて明示的に言及していませんが、テストは簡単です。たとえば、$element.css('border-radius')Chromeでは、border-radiusまたはとして設定された値が返され、 として-webkit-border-radius設定された値は無視され-moz-border-radiusます。

省略形のプロパティについては、ブラウザー間で一貫性がないことに注意してください。

一部のブラウザーでは機能しますが、簡略化された CSS プロパティ (例: margin、background、border) の取得は保証されません。たとえば、レンダリングされた を取得する場合は、 、 などをborder-width使用します。$( elem ).css( "borderTopWidth" )$( elem ).css( "borderBottomWidth" )

于 2016-09-14T22:06:43.817 に答える