ラジオボタンをチェックするとそれぞれに
指定したクラス名がこの領域に
付加されてそのCSSが適用されます。
★☆★☆★☆ ナウでヤングなレンタルサーバー！ロリポップ！ ☆★☆★☆★
月額２６３円で容量１ＧＢ
Movable TypeやWordpressだって使えるよ。
サンプルソース
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>JavaScriptで動的にクラス名を付けます。変えます。</title>
<style type="text/css">
<!--
a,label {
cursor:pointer; /* カーソルの形状 */
}
.pink {
width: 350px; /* 横幅 */
height: 100px; /* 高さ */
padding : 5px; /* 内側余白 */
color :green; /* 文字色 */
background-color: pink; /* 背景色 */
}
.lavender {
width: 500px;
height: 200px;
padding : 50px;
color: red;
background-color: lavender;
}
-->
</style>
<script language="JavaScript">
<!--
function pinkClass() {
document.getElementById('pBox').className = "pink";
}
function lavenderClass() {
document.getElementById('pBox').className = "lavender";
}
function noneClass() {
document.getElementById('pBox').className = "";
}
// -->
</script>
</head>
<body>
<form>
<input type="radio" name="rajio" onclick="pinkClass()" checked id ="raji1" /><label for="raji1" class="Lbl">
クラス名 pink を指定</label>
<input type="radio" name="rajio" onclick="lavenderClass()"
id ="raji2" /><label for="raji2" class="Lbl">
クラス名 lavender を指定</label>
<input type="radio" name="rajio" onclick="noneClass()"
id ="raji3" /><label for="raji3" class="Lbl">
クラス名 を削除</label>
</form>
<p id="pBox" class="pink"> ラジオボタンをチェックするとそれぞれに<br>
指定したクラス名がこの領域に <br>
付加されてそのCSSが適用されます。</p>
</body>
</html>
スタイルシートソースの各プロパティは クラス名の書き換えとは直接関係はありません。
視覚的にクラス名が変わった事を分かり易くするためです。
document.getElementById('pBox').className = "pink";
document.getElementById('pBox').className = "lavender";
ID名が 'pBox'である要素の クラス名を "pink" にします。あるいは "lavender"にします。
document.getElementById('pBox').className = "";指定した要素のクラス名を削除します。
<label></label>要素でラベル(ラジオボタンの横の文字列)でも選択可能にします。
スタイルシート CSS
ラジオボタン,チェックボックスのラベルでもチェックの On/Off の選択を可能にする
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。
