JavaScript CSS ベンダープレフィックスを簡素化するにはどうすればよいですか?

JavaScript を使用したベンダー プレフィックス

JavaScript を使用して CSS で要素をスタイル設定することは、特にベンダー プレフィックスを扱う場合に面倒になることがあります。従来のアプローチでは、次のコード ブロックに示すように、プレフィックス付きの各プロパティを手動で設定する必要があります。

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

簡略化されたソリューション

このプロセスを簡素化するために、カスタム関数を使用できます。

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;
}

この関数は、スタイルを設定する要素、設定するプロパティ、および希望の値。サポートされているプレフィックスを繰り返し処理し、適切なスタイルを設定します。

使用法

setVendor 関数を使用すると、上記のコード ブロックは次のように簡略化できます。

setVendor(elem, "Transform", transform);

この 1 行のコードは、必要なすべてのベンダー プレフィックスを含む変換スタイルを効果的に適用し、スタイルをそよ風。

以上がJavaScript CSS ベンダープレフィックスを簡素化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。