JavaScriptでCSSのクラスの値を変更するサンプルです。
通常JavaScriptでCSSの値を変更するには
var el = document.getElementById('id名'); // 要素を指定
el.style.color = "#ff0000"; // 値を入れる
上みたいに 要素.style.プロパティ = 値; のようにしますが、
クラスの値を変更する場合は
CSSルール.style.プロパティ = 値; のようにします。
要素の代わりにCSSルールを指定すればいい、ということです。
CSSルールとは
CSSルールというのは、styleタグなどに次のような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」をセレクタとした４つのCSSルールがあるということです。
CSSルールの見つけ方
CSSルールの見つけ方ですが、要素の場合と違って getElementByIdのような簡単に指定できるメソッドはないようなので、stylesheet(内部的な)からCSSのセレクタを目印にしてクラスが設定されているCSSルールを探します。
.bgblueをセレクタとしている CSSルールを見つけるには次のようにします。
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<sheets.length; i++){
// そのstylesheetが持つCSSルールのリストを取得
rules = sheets[i].cssRules;
for(j=0; j<rules.length; j++){
// セレクタが一致するか調べる
if(sele === rules[j].selectorText){
rule = rules[j];
break;
}
}
}
return rule;
}
短いプログラムなので大体わかると思いますが、ポイントは selectorTextプロパティで CSSルールからセレクタを取得して、一致したらその CSSルールを返すというところです。
ちなみに、外部サーバーからスタイルシートを読み込んでいる場合は、
rules = sheets[i].cssRules;
あたりでエラーが出ると思います。必要な方はここでエラー処理を行ってください。
サンプルソース
実際に動くサンプルとして、「マウスホイールを回すと bgblueクラスが設定されたボックスの背景色が変化する」というのを置いておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クラス操作てすと</title>
<style>
.outer{
display:flex;
margin:20px;
}
.inner{
width:112px;
height:60px;
border:1px solid #aaa;
}
.bgred{
background-color:#f00;
}
.bgblue{
background-color:#00f;
}
</style>
</head>
<body>
ホイールを回すと bgblueクラスの背景色が変わる
<div class="outer">
<div class="inner bgblue"></div>
<div class="inner bgred"></div>
<div class="inner bgblue"></div>
</div>
<script>
var targetClass = getRuleBySelector('.bgblue');
// ホイールで色を変更
document.addEventListener('wheel', function(e){
var delta = (e.deltaY > 0) ? 1:-1;
chgColor(delta);
});
function chgColor(delta){
if(typeof chgColor.val === 'undefined')
chgColor.val = 240;
chgColor.val += delta*10;
targetClass.style.backgroundColor = 'hsl('+chgColor.val+', 100%, 50%)';
}
// 指定セレクタのCSSルールを取得する
// 呼び出し例 getRuleBySelector(".inner1") seleにCSSセレクタ
function getRuleBySelector(sele){
var i, j, sheets, rules, rule = null;
// stylesheetのリストを取得
sheets = document.styleSheets;
for(i=0; i<sheets.length; i++){
// そのstylesheetが持つCSSルールのリストを取得
rules = sheets[i].cssRules;
for(j=0; j<rules.length; j++){
// セレクタが一致するか調べる
if(sele === rules[j].selectorText){
rule = rules[j];
break;
}
}
}
return rule;
}
</script>
</body>
</html>
参考にさせていただいたサイト
あとがき
CSSルールにアクセスして CSSプロパティの値を変更するという方法は、セレクタが一致すればいいので、クラスだけでなく擬似要素や擬似クラスでも同様な方法で値の変更が可能です。