CSS
JavaScript

JavaScript でベンダープレフィックスつきの CSS プロパティを設定する

More than 5 years have passed since last update.

Chrome 23, Safari 6, Firefox 17, Opera 12 で試してみました。

ベンダープレフィックスのところは、例として webkit にしています。適宜読み替えてください。

以下はどのブラウザでも OK。

document.body.style.setProperty('-webkit-transform', 'rotate(180deg)');

document.body.style.WebkitTransform = 'rotate(180deg)';

以下は Webkit ブラウザ(Chrome, Safari)でだけ動きました。

document.body.style['-webkit-transform'] = 'rotate(180deg)';

document.body.style.webkitTransform = 'rotate(180deg)';

以下はどのブラウザでも動かず。

document.body.style.webkittransform = 'rotate(180deg)';

document.body.style.setProperty('webkitTransform', 'rotate(180deg)');
document.body.style.setProperty('WebkitTransform', 'rotate(180deg)');

どうやら setProperty() で CSS のプロパティ名(例 -webkit-transform)で指定するか、JavaScript のプロパティ名(例 WebkitTransform)で直接指定する方法があるようです。


JavaScript で使えるプロパティ名を取得する

では適切なプロパティ名を取得するには?

JavaScript のプロパティ名の方(例 WebkitTransform)は、element.style に設定されていない場合でも "" が入っているので、これを使って判断できます。(Opera は CSS プロパティ名の方でも "" が入っているようです。)

現在手元に Windows がないので IE は確認できませんが、だいたいこんな感じだと思います。

function capitalize(str) {

return str.charAt(0).toUpperCase() + str.substring(1);
}
function toCamelCase(hyphenated, isLower) {
var components = hyphenated.split('-');
for (var i = 0; i < components.length; i++) {
if (!(isLower && i === 0)) {
components[i] = capitalize(components[i]);
}
}
return components.join('');
}
function getPropertyName(propertyName, elem) {
elem = elem || document.body;
// Check without prefix
var lowerCamel = toCamelCase(propertyName, true);
if (typeof elem.style[lowerCamel] === 'string') {
return lowerCamel;
}
// Check prefixes
var upperCamel = toCamelCase(propertyName);
var prefixes = ['', 'Webkit', 'Moz', 'O', 'ms']; // Not sure about 'ms'. 'Ms'?
for (var i = 0; i < prefixes.length; i++) {
var candidate= prefixes[i] + upperCamel;
if (typeof elem.style[candidate] === 'string') {
return candidate;
}
}
}

console.log(getPropertyName('transform'));
// WebkitTransform etc.

または getComputedStyle() の返り値を使えば CSS のプロパティ名を調べることもできそうです。こっちは設定されていないプロパティでも "none"""(ブラウザによる)が入っています。