JavaScriptでページ内のスタイルシートにキーフレームを追加する
JavaScriptで CSSのキーフレームを追加して使う方法を探していたところ CSSStyleSheetインターフェイスというものを見つけたのでそれについての情報をメモ。ページに読み込まれている複数のスタイルシートから1つを選び新しいルールとしてキーフレームを追加する方法の説明です。
CSSStyleSheetインターフェイスの概要
はじめにスタイルシートの情報を含む CSSStyleSheetインターフェイスをどのように取得するかですが documentオブジェクトから styleSheetsプロパティを参照することで取得することができます。
var styleSheetList = document.styleSheets;
document.styleSheetsで StyleSheetListというオブジェクトを返します。
コンソールで確認すると複数の CSSStyleSheetオブジェクトが確認できます。この場合、4つのスタイルシートがページ内に読み込まれていることになり個々のオブジェクトが CSSStyleSheetインターフェイスです。このオブジェクトには様々なプロパティが含まれています。
プロパティ | 説明 |
---|---|
cssRules | 指定されたスタイルシートのルールを返します。 |
disabled | 指定されたスタイルシートが無効になっているかを示す真偽値を返します。 |
href | 指定されたスタイルシートの URIを返します。 |
media | 指定されたスタイルシートの media属性の値を返します。 |
ownerNode | 指定されたスタイルシートを documentと関連付けているノードを返します。 |
ownerRule | 指定されたスタイルシートが @import規則を使用して documentにインポートされたスタイルシートである場合、ownerRuleは、その CSSImportRuleを返す。そうでない場合、null を返します。 |
parentStyleSheet | 指定されたスタイルシートを含む親スタイルシートが存在する場合、それを返します。 |
rules | 指定されたスタイルシートのルールを返します。 |
title | 指定されたスタイルシートの title属性の値を返します。多くの場合、ownerNodeで指定されています。 |
type | 指定されたスタイルシートの type属性の値を返します。 |
JavaScriptでキーフレームを追加する方法
ページ内に読み込まれているスタイルシートから対象を指定してキーフレームのルールを追加するには insertRuleメソッドを使います。
var styleSheet = document.styleSheets[0]; var keyframes = {fade: '@keyframes fade {0% {opacity: 0;}100% {opacity: 1;}}'}; styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
insertRuleメソッドの第1引数には追加するスタイルシートのルールを指定します。第2引数にはスタイルシート内の、どこに追加するかをインデックスで指定します。上記の場合、ページに読み込まれた1番目のスタイルシート内の最後にキーフレームのルールを追加することになります。
最後にキーフレームのルールを追加するための関数の説明をします。
<head> <link rel="stylesheet" href="css/reset.css"> <link id="style" rel="stylesheet" href="css/style.css"> </head>
head要素内の id名 styleが指定されたスタイルシートにキーフレームのルールを追加します。
$(function(){ /*//////////////////////////////////////////////////////////////////////////////// 指定したスタイルシートにキーフレームを追加する。 ////////////////////////////////////////////////////////////////////////////////*/ var kf = { fade: '@keyframes fade {0% {opacity: 0;}100% {opacity: 1;}}', scale: '@keyframes scale {0% {transform: scale(0, 0);}100% {transform: scale(1, 1);}}' }; _addKeyFrames(kf, '#style'); function _addKeyFrames(kf, t){ var bp = _getVendorPrefix(); var ssi = _getStyleSheetIndex(t); var styleSheet = document.styleSheets[ssi]; $.each(kf, function(k, v){ if(bp) styleSheet.insertRule('@-' + bp + '-' + v.substr(1), styleSheet.cssRules.length); styleSheet.insertRule(v, styleSheet.cssRules.length); }); function _getVendorPrefix(){ var ua = navigator.userAgent.toLowerCase(); var bp; if(ua.indexOf('webkit') != -1){ bp = 'webkit'; }else if(ua.indexOf('msie') != -1 || ua.indexOf('trident') != -1){ bp = 'ms'; }else if(ua.indexOf('firefox') != -1){ bp = 'moz'; }else{ bp = null; } return bp; };//_getVendorPrefix() function _getStyleSheetIndex(t){ var i; if(typeof t === 'number'){ i = t; }else if(typeof t === 'string'){ i = t.match(/^#/) ? $(t).index('head link[rel=stylesheet], head style') : $('[href="' + t + '"]').index('head link[rel=stylesheet], head style'); } return i; };//_getStyleSheetIndex() };//_addKeyFrames() });
_addKeyFrames( )の第1引数にはオブジェクト化されたスタイルシートのルール(キーフレーム)、第2引数には対象になる link要素、または style要素に指定された id属性の値、その他に対象になるスタイルシートのインデックスの指定をします。