JavaScriptからCSSへスタイルを追加できるinsertRule
普段JavaScriptからスタイルを制御するときはelement.style.display = "none"
といったふうにstyle
を使うことが多いと思います。そういった中で、CSS3の@keyframes
などは指定する要素が多く、なかなかstyle
を使いづらい。そこで、CSSにスタイルを追加できるinsertRuleを使うことにしました。
JavaScriptから@keyframes
のtransform
の値を操作したいときのコード。
var css = document.styleSheets[0];
var scale = 0.5;
css.insertRule(
"@keyframes show-anime{" +
"0%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
"20%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
"50%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
"75%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
"100%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}}", 0);
iOS 8以下でエラーが出るときはベンダープレフィックスをつけるべし
insertRule
を使ってCSSに@keyframes
を追加すると、iOS 8以下でエラーが出ます。エラーの内容は、@keyframes
が対応していないといったものです。そこで、iOS 8以下のときはベンダプレフィックスのついた@-webkit-keyframes
を指定するとエラーが出なくなります。
// @keyframesを変数でもっておく
var cssKeyframes = "@keyframes";
if (/(iPhone)/g.test(navigator.userAgent)) {
navigator.userAgent.match(/iPhone OS (\w+){1,3}/g);
var osv = RegExp.$1.split("_")[0];
if(osv <= 8) { // iOS 8以下
// iOS 8以下の時だけベンダープレフェックスをつける
cssKeyframes = "@-webkit-keyframes";
}
}
var css = document.styleSheets[0];
var scale = 0.5;
// @keyframesを設定する
css.insertRule(
cssKeyframes + " show-anime{" +
"0%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
"20%{transform:translate3d(0," + (100 * scale) + "px,0);-webkit-transform:translate3d(0," + (100 * scale) + "px,0)}" +
"50%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
"75%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}" +
"100%{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}}", 0);