classNameプロパティを利用したスタイルの入れ替え

classNameプロパティ
・要素のclass名を変更できれば、そのclass名に該当するスタイルに変更できる。
　classNameプロパティを使えばclass名を設定できる。

Sample

■下のボタンにマウスを乗せると、そのボタンのスタイルが変わります。またクリックすると下の囲み枠のスタイルを変更できます。

ここのスタイルを入れ替えます。
スタイルをいくつか定義しておき、Scriptでclass名を変更すれば適用スタイルが変わる。

■クリックしたセルだけ反転する（スタイルの切り替えを利用）

大阪府

広島県

鳥取県

北海道

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

<style TYPE="text/css">
<!--
  .sample button,table {cursor:hand;font:12pt 'Arial Black'}
  .over {color:magenta;background-color:linen}
  .D0 {width:70%;border:solid gray}
  .D1 {width:300px;color:blue;background:lavender;border:1px dashed navy}
  .D2 {width:12cm;color:pink;background:black}
  .D3 {width:70%;color:navy;background:thistle;border:3px double red}
  .SellA {color:black;background:ivory}
  .SellB {color:yellow;background:black}
-->
</style>
<script language="JavaScript"><!--
function CssChange(n){
 D.className = "D" + n;   //囲み枠のclass名を変えることでスタイルを変更
}

function SellCssChange(){
　if (event.srcElement.className == "SellA") {
　　event.srcElement.className = "SellB";　　//セルのclass名を変える
　}
}
function SellClear(){
　if (event.srcElement.className == "SellB") {
     event.srcElement.className = "SellA";
  }
}
//--></script>
</head>

<body>
<p>■下のボタンにマウスを乗せると、そのボタンのスタイルが変わります。
　　　　　　　　　　またクリックすると下の囲み枠のスタイルを変更できます。</p>
<h3 align="center">
　<button onmouseover="this.className='over';" onmouseout="this.className='';"
　　　　　　　　 onclick="CssChange(0);">デフォルトのStyle</button>
　<button onmouseover="this.className='over';" onmouseout="this.className='';"
　　　　　　　　 onclick="CssChange(1);">Style 1</button> 
　<button onmouseover="this.className='over';" onmouseout="this.className='';"
　　　　　　　　 onclick="CssChange(2);">Style 2</button> 
　<button onmouseover="this.className='over';" onmouseout="this.className='';"
　　　　　　　　 onclick="CssChange(3);">Style 3</button>
</h3>
<div id="D" class="D0">
　<p>ここのスタイルを入れ替えます。<br>
　スタイルをいくつか定義しておき、Scriptでclass名を変更すれば適用スタイルが変わる。</p>
</div>

<p>■クリックしたセルだけ反転する（スタイルの切り替えを利用）</p>
<table border="1" cellpadding="6" cellspacing="3" 
　　　　　　　onclick="SellCssChange();" onmouseout="SellClear();">
  <tr>
    <td class="SellA">大阪府</td>
    <td class="SellA">広島県</td>
    <td class="SellA">鳥取県</td>
    <td class="SellA">北海道</td>
  </tr>
</table>

classNameプロパティを利用したスタイルの入れ替え

Sample

デフォルトのStyle Style 1 Style 2 Style 3