--- title: JavaScriptでCSSのクラスの値を変更する tags: CSS JavaScript author: life5618 slide: false --- JavaScriptでCSSのクラスの値を変更するサンプルです。 通常JavaScriptでCSSの値を変更するには ```javascript var el = document.getElementById('id名'); // 要素を指定 el.style.color = "#ff0000"; // 値を入れる ``` 上みたいに __要素.style.プロパティ = 値;__ のようにしますが、 クラスの値を変更する場合は __CSSルール.style.プロパティ = 値;__ のようにします。 要素の代わりに__CSSルール__を指定すればいい、ということです。 ##CSSルールとは __CSSルール__というのは、styleタグなどに次のようなCSSが書かれている場合 ```css .outer{ display:flex; margin:20px; } .inner{ width:112px; height:60px; border:1px solid #aaa; } .bgred{ background-color:#f00; } .bgblue{ background-color:#00f; } ``` __セレクタ{プロパティ:値; ~}__ のブロックが __CSSルール__になります。 上記のCSSには、「.outer, .inner, .bgred, .bgblue」をセレクタとした4つのCSSルールがあるということです。 ##CSSルールの見つけ方 CSSルールの見つけ方ですが、要素の場合と違って getElementByIdのような簡単に指定できるメソッドはないようなので、stylesheet(内部的な)からCSSのセレクタを目印にしてクラスが設定されているCSSルールを探します。 .bgblueをセレクタとしている CSSルールを見つけるには次のようにします。 ```javascript var targetClass = getRuleBySelector('.bgblue'); // 指定セレクタのCSSルールを取得する // 呼び出し例 getRuleBySelector(".inner1") seleにCSSセレクタ function getRuleBySelector(sele){ var i, j, sheets, rules, rule = null; // stylesheetのリストを取得 sheets = document.styleSheets; for(i=0; i クラス操作てすと ホイールを回すと bgblueクラスの背景色が変わる
``` ##参考にさせていただいたサイト >[uhyohyo.net JavaScript初級者から中級者になろう 第五章 CSSの操作](https://uhyohyo.net/javascript/5_1.html) ##あとがき CSSルールにアクセスして CSSプロパティの値を変更するという方法は、セレクタが一致すればいいので、クラスだけでなく擬似要素や擬似クラスでも同様な方法で値の変更が可能です。