ホーム >>> HTML整理ノート

cssRules／rules ルールオブジェクト

■stylesheetオブジェクト.cssRules　（IEはrules）
・ルールとは　セレクタ{プロパティ:値;プロパティ:値;･･･}で設定された組み合わせを指す。出現順にindex番号を持つ配列としてcssRules（IEはrules）に格納される。
・cssRules.length ･･･ルールの数を返す

■クロスプラウザ対応にするには以下でよい
　var ルールオブジェクトの変数 =
　　　　styleSheetオブジェクト.rules || styleSheetオブジェクト.cssRules;

 　* 演算子(||)については･･･→「論理演算子(||)について」参照

 または
　var ルールオブジェクトの変数 =
　　　(styleSheetオブジェクト.cssRules) ? styleSheetオブジェクト.cssRules
　　　　　　　 : styleSheetオブジェクト.rules;

　 * (条件式)? ：　は･･･→「三項演算子の活用」参照

Sample

このページに設定されているスタイルの

Sample Source......................................................................>>>

<link rel="stylesheet" href="../css_css.css" type="text/css">  //外部CSSファイル
<style type="text/css">　　　　//2個めのstylesheetオブジェクト
<!--
  div.sample h5 { background-color:lavender;color:green;}
  div.sample p.sample { font:bold 20px 'ＭＳ 明朝';color:navy;}
-->
</style>

<script type="text/javascript"><!--
 function Rule(){
   var str = "このページには：";
   var sheets = document.styleSheets;
   str += sheets.length + "個のstylesheetオブジェクトがあります<hr>";
   for(var i = 0;i<sheets.length;i++){
        var rules = sheets[i].rules || sheets[i].cssRules;　　//クロスプラウザ対応に
        str += (i+1) + "番目のstylesheetオブジェクトには：" + rules.length + "個のルールがある<br>";
   }
   document.getElementById("view").innerHTML = "<p>" + str + "</p>";
 }
// --></script>
</head>

<body>
<p>このページに設定されているスタイルの<button onclick="Rule()">ルール数を取得</button></p>
<div id="view" style="width:400px;border:1px solid green"></div>