CSSのクラス (class) 及びアニメーション (animation) の動的作成 – browser-land

CSSのクラス (class) 及びアニメーション (animation) の動的作成

 CSSStyleSheetの取得

var vSheet = document.styleSheets[0];

動的に作成するスタイルシートを指定します。
styleSheetsは内部・外部スタイルシートのリストを返します。
 indexを[0]を指定すると、リストから最初の1枚目のスタイルシートを取得します。
 取得したスタイルシートオブジェクトはプロパティとメソッドを継承します。
 スタイルシートが1枚も存在しない場合はエラーとなります。

 CSSクラスの動的作成

var vRule1 = “.box { transition:background 1s 0s ease; }”;
var vRule2 = “.box:hover { background:#f2e26d; }”;
var vIndex = 0;

vSheet.insertRule(vRule1, vIndex);
vSheet.insertRule(vRule2, vIndex);
element.className = “box”;

CSSStyleSheetの先頭に新しいCSS規則を挿入し、要素に適用しています。
insertRule() は、新しいCSS規則を現在のスタイルシートに挿入します。
 引数の「0」は新しいCSS規則の挿入位置が先頭である事を指定しています。
className は要素の class 属性の値の取得 / 設定に用います。

 CSSアニメーションの動的作成

var vRule = “@keyframes ani { 100% { background:#f2e26d; } }”;
var vIndex = 0;

vSheet.insertRule(vRule, vIndex);
element.style.animation = “ani 1s ease 0s infinite forwards”;

insertRule() は、新しいCSS規則を現在のスタイルシートに挿入します。
animation は要素のアニメーションプロパティ設定に用います。

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード