14

……とてつもなく痛い。

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

これを行うためのライブラリ/フレームワーク/より良い方法はありますか? できればJSの1行だけで？

4

5 に答える 5

28

これを行うライブラリはわかりませんが、それらがすべて単なるプレフィックスである場合、つまり名前や構文に違いがない場合は、関数を自分で作成するのは簡単です。

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

そうすれば、ほとんどの場合、これを使用できます。

于 2012-01-17T02:59:03.643 に答える
17

現在は 2015 年後半で、状況はわずかに変化しています。まず第一に、上記の大文字についての McBrainy のコメントは重要です。webkitプレフィックスはになりましたWebkitが、幸いなことに現時点では Safari でのみ使用されています。現在、 Chrome と Firefox の両方el.style.transformがプレフィックスなしでサポートしています。IE もサポートしていると思います。以下は、当面のタスクに対するもう少し現代的なソリューションです。最初に、変換プロパティにプレフィックスを付ける必要があるかどうかを確認します。

var transformProp = (function(){
  var testEl = document.createElement('div');
  if(testEl.style.transform == null) {
    var vendors = ['Webkit', 'Moz', 'ms'];
    for(var vendor in vendors) {
      if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {
        return vendors[vendor] + 'Transform';
      }
    }
  }
  return 'transform';
})();

その後、単純なワンライナー呼び出しを使用しtransformて、要素のプロパティを更新できます。

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';
于 2015-09-13T07:01:57.783 に答える
2

それを処理するこのjqueryプラグインがあり ますhttps://github.com/codler/jQuery-Css3-Finalize

于 2012-01-17T09:46:26.260 に答える
0

たとえば、Gulp を使用してワークフローを設定している場合は、Postcss autoprefixerを使用できます。これは、ブラウザーのベンダー プレフィックスを解決するための便利なツールです。JS を使用して css を変換します。

于 2017-02-27T13:16:01.283 に答える