ウェブページ内の特定要素の見た目を JavaScript で動的に変更する方法を調べました。
一般的にウェブページ内の要素の見た目はスタイルシートで管理されます。例えばこのような感じ：
この時点では #container1 要素はピンク（#ffcccc）で塗りつぶされて表示されます：
この部分の「背景色を動的に（JavaScript で）別の色に変えたい」場合、いくつかの方法が考えられます。一般的には背景色が指定された class を複数用意し、id ではなく class 指定で背景色を与えた上で、JavaScript で指定 class を切り替える（jQuery であれば removeClass + addClass）方法です。 ただこの方法は「事前に class を定義しておく」必要があります。切り替える瞬間の情報や属性値を参照して背景色を決めるとか、ランダム要素を使って背景色を決めるなど、事前に定義する内容が定まらないような場合では使えません。このような場合も含めて #container1 要素に定義された内容そのものを変更する（つまりスタイル定義内容そのものを動的に変更する）にはどのようにすればよいかを調べました。以下、jQuery を併用した場合で説明します。
例えば #container1 で定義されるエリアをクリックしたら背景色をランダムに変える、という場合であれば以下のような JavaScript で実現できます：
スタイルシートの内容を変更したい要素をセレクターを指定して取り出し、その取得結果（配列）の最初の要素を取り出します。そして取り出した要素の style 属性がスタイルシートの内容なのでここを JavaScript で上書きするよう記述します（上例では t.style 内の 'background-color' 属性をランダムに上書きしています）。この方法であれば class を使うことなく、切り替えることもなく、スタイルシート定義を書き換えることで見た目の変更を実現できます。
実際に動くサンプルを用意しました：
https://dotnsf.github.io/dynamic-css/
上記 URL にアクセスすると以下のような画面が表示されます。画面上部に高さ 100px でピンク色の矩形が表示されています：
この矩形部分をクリック（タップ）すると、７種類の中からランダムに選ばれた背景色に切り替わります：
JavaScript でスタイルシートの内容を動的に書き換える方法のサンプルでした。class を事前に用意して指定し直す、というロジックが使えない場合でも実現可能な方法です。
一般的にウェブページ内の要素の見た目はスタイルシートで管理されます。例えばこのような感じ：
<head>
<style>
#container1{
background-color: #fcc;
height: 100px;
}
</style>
</head>
<body>
<div class="container" id="container1">
</div>
</body>
この時点では #container1 要素はピンク（#ffcccc）で塗りつぶされて表示されます：
この部分の「背景色を動的に（JavaScript で）別の色に変えたい」場合、いくつかの方法が考えられます。一般的には背景色が指定された class を複数用意し、id ではなく class 指定で背景色を与えた上で、JavaScript で指定 class を切り替える（jQuery であれば removeClass + addClass）方法です。 ただこの方法は「事前に class を定義しておく」必要があります。切り替える瞬間の情報や属性値を参照して背景色を決めるとか、ランダム要素を使って背景色を決めるなど、事前に定義する内容が定まらないような場合では使えません。このような場合も含めて #container1 要素に定義された内容そのものを変更する（つまりスタイル定義内容そのものを動的に変更する）にはどのようにすればよいかを調べました。以下、jQuery を併用した場合で説明します。
例えば #container1 で定義されるエリアをクリックしたら背景色をランダムに変える、という場合であれば以下のような JavaScript で実現できます：
<script>
$(function(){
$('#container1').on( 'click', function( e ){
//. #container1 のスタイルシート定義を動的に変える。具体的には背景色を変更する
var bgs = [ '#fcc', '#cfc', '#ccf', '#cff', '#fcf', '#ffc', '#ccc' ];
var bg = bgs[Math.floor( Math.random() * bgs.length )];
var t = $('#container1')[0];
t.style['background-color'] = bg;
});
});
</script>
スタイルシートの内容を変更したい要素をセレクターを指定して取り出し、その取得結果（配列）の最初の要素を取り出します。そして取り出した要素の style 属性がスタイルシートの内容なのでここを JavaScript で上書きするよう記述します（上例では t.style 内の 'background-color' 属性をランダムに上書きしています）。この方法であれば class を使うことなく、切り替えることもなく、スタイルシート定義を書き換えることで見た目の変更を実現できます。
実際に動くサンプルを用意しました：
https://dotnsf.github.io/dynamic-css/
上記 URL にアクセスすると以下のような画面が表示されます。画面上部に高さ 100px でピンク色の矩形が表示されています：
この矩形部分をクリック（タップ）すると、７種類の中からランダムに選ばれた背景色に切り替わります：
JavaScript でスタイルシートの内容を動的に書き換える方法のサンプルでした。class を事前に用意して指定し直す、というロジックが使えない場合でも実現可能な方法です。
