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"
や ""
(ブラウザによる)が入っています。