2009年09月01日

JavaScriptで動的にクラス名を付けます。変えます。

スポンサード リンク


       

 ラジオボタンをチェックするとそれぞれに
指定したクラス名がこの領域に
付加されてそのCSSが適用されます。

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額263円で容量1GB
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 の選択を可能にする
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります。

posted by javaScript at 20:19 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。