2011年08月31日

要素のID名の設定、変更。

スポンサード リンク

 要素のID名を動的に換えてスタイルを変更。javascript
element.id="ID名"

このP要素の ID名を付け替えて
スタイルを変更します。下のボタンを押してください。
押すたびに切り替わります。現在のID名:pBox0

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ スタンダード

サンプルソース

<html>
 <head>
<title>要素のID名の設定、変更、付け替え</title>
<style type="text/css">
<!--
#pBox0{
   color: green;
   background-color: #f0fff0;
   width: 500px;
   padding:10px;
   font-family: HGP創英角ポップ体;
  }

#pBoxNew{
  color: navy;
  background-color: #e8e8ff;
  width: 500px;
  padding:10px;
  font-weight: bold;
  text-align: center;
  font-family: "MS ゴシック";
}

#pSpn{
  color :red;
 }

-->
</style>
<script language="JavaScript">
<!--
  var num=0;
  var idName="pBox0"; // 最初のID名
function cngID(){
 num ^= 1; // 0と1の切り替え ^ 排他的論理和
  Pelm = document.getElementById(idName);//対象の要素。
  Mbox = document.getElementById("pSpn");
if(num == 1){
 Pelm.id="pBoxNew"; // 新規ID名 設定
  idName=Pelm.id; // ID名 取得
   Mbox.innerHTML="現在のID名:"+idName; // ID名 表示
  }
else{
 Pelm.id="pBox0"; // 最初のID名
  idName=Pelm.id;
   Mbox.innerHTML="現在のID名:"+idName;
  }
 }
//-->
</script>
</head>
<body>
<p id="pBox0">このP要素の ID名を付け替えて<br>
スタイルを変更します。下のボタンを押してください。<br>
押すたびに切り替わります。<span id="pSpn">現在のID名:pBox0</span>
</p>
  <input type="button" id="botan" value="ID名の変更" onclick="cngID()">
</body>
</html>

ID名の設定、取得
var idName="pBox0";
Pelm = document.getElementById(idName);//対象の要素。ID名は pBox0 です。
 Pelm.id="pBoxNew"; // Pelm のID名を pBoxNew に付け替えます。
  idName=Pelm.id; // Pelm のID名を取得します。

この様に ID名やクラス名を変更することでHTMLタグをいじることなく
デザインを変更することができます。

さくらのレンタルサーバ スタンダード
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐
スタイルシート クラス名の取得、付け替え
JavaScriptで動的にクラス名を付けます。変えます。
サーバーカウボーイ

タグ:ID CSS
posted by javaScript at 19:18 | 大阪 ☁ | DOM | このブログの読者になる | 更新情報をチェックする
×

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