LoginSignup
19
20

More than 5 years have passed since last update.

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

Posted at

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

19
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
20