JavaScriptでページ内のスタイルシートにキーフレームを追加する

JavaScriptでページ内のスタイルシートにキーフレームを追加する

JavaScriptで CSSのキーフレームを追加して使う方法を探していたところ CSSStyleSheetインターフェイスというものを見つけたのでそれについての情報をメモ。ページに読み込まれている複数のスタイルシートから1つを選び新しいルールとしてキーフレームを追加する方法の説明です。

CSSStyleSheetインターフェイスの概要

はじめにスタイルシートの情報を含む CSSStyleSheetインターフェイスをどのように取得するかですが documentオブジェクトから styleSheetsプロパティを参照することで取得することができます。

JavaScript
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メソッドを使います。

JavaScript
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番目のスタイルシート内の最後にキーフレームのルールを追加することになります。

最後にキーフレームのルールを追加するための関数の説明をします。

HTML
<head>
<link rel="stylesheet" href="css/reset.css">
<link id="style" rel="stylesheet" href="css/style.css">
</head>

head要素内の id名 styleが指定されたスタイルシートにキーフレームのルールを追加します。

JavaScript
$(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属性の値、その他に対象になるスタイルシートのインデックスの指定をします。

ページの先頭へ