2011年04月26日

スタイルシート クラス名の取得、付け替え

スポンサード リンク

 要素のid名、クラス名の取得。クラス名の付け替え
element.id 、 element.className 、 element.className="クラス名"

 この領域は p 要素で id名は "box",  class名は "boxcls"と付けられています。
マウスを乗せると要素のid名とclass名を取得することができます。
クリックすると要素のclass名を付け替えます。(背景色が変わる)
ダブルクリックすると,もとのclass名に代わります。
ここに表示します。

サンプルソース

<html>
 <head>
  <title>id名、クラス名の取得、クラス名の変更</title>
<style type="text/css">
<!--
.boxCLS{
  background-color : #ffe6ff;
  padding : 10px;
  width : 530px;
  height : 130px;
  cursor : pointer;
    }
.newBOXCLS{
  background-color :#ccccff;
  padding : 10px;
  width : 530px;
  height : 130px;
  cursor : pointer;
   }
#spanbox{
  font-size : 24px;
  font-weight : bold;
  color : red;
   }
-->
</style>

<script type="text/javascript">
<!--
   //IEとIE以外 イベントリスナー共通関数
function addEVT(elm,type,fnc){ //(要素, イベントタイプ, 関数)
  try{elm.addEventListener(type,fnc,false);
    }catch(e){elm.attachEvent("on"+type,fnc);
       }  // try 〜 catch 例外処理、エラー処理
   }

function getID(){
 PBox = document.getElementById("box");//イベントを付加する要素。
  Msgbox = document.getElementById("spanbox");//メッセージを表示する要素
   addEVT(PBox,"mouseover",showMsg);
   addEVT(PBox,"click",cngCls);
   addEVT(PBox,"dblclick",cngCls1);
     }

function showMsg(){//id名(PBox.id)とclass名(PBox.className)の表示
 Msgbox.innerHTML= "id名: "+ PBox.id +"<br>"+"class名: "+ PBox.className;
    }

function cngCls(){
 PBox.className="newBOXCLS";//クラス名の変更
  showMsg();
   }

function cngCls1(){
 PBox.className="boxCLS";
  showMsg();
  }

addEVT(window,"load", getID);//ページの読み込みが完了したら
//-->
</script>

</head>
<body>
<p class="boxCLS" id="box">
 この領域は p 要素で id名は &quot;box&quot;, &nbsp;class名は &quot;boxcls&quot;と付けられています。<br>
マウスを乗せると要素のid名とclass名を取得することができます。<br>
クリックすると要素のclass名を付け替えます。(背景色が変わる)<br>
ダブルクリックすると,もとのclass名に代わります。<br>
<span id="spanbox">ここに表示します。</span>
</p>
</body>
</html>

id名  class名の取得
 id名「box」を設定したp要素から,値を取得します。
 PBox = document.getElementById("box")は取得するターゲット要素を指定しています。
id名はPBox.id
クラス名はPBox.classNameで取り出すことができます。
class名 の設定、変更
 PBox.className="newBOXCLS";
スタイルシートに記したクラス名を入れます。上記は newBOXCLS を入れて
初期設定のクラス名 boxCLS から newBOXCLS に変更しています。
クラス名を外す場合はPBox.className=" ";にします。
要素について
下記の例では、「<p>」が開始タグ、「</p>」が終了タグになります。
「javascriptサンプル集」は、この要素の内容を示します。

  <p id="box" class="boxCLS">javascriptサンプル集</p> ←これが要素です。
    └──────────       要素        ──────────┘
開始タグと終了タグで文字列を囲んで要素を表します。

getAttributeNode()メソッド id名の取得
DOM リンク先とリンク文字をgetAttributeNodeとnodeValueで変更。
さくらのレンタルサーバ スタンダード
JavaScriptで動的にクラス名を付けます。変えます。

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

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