■getAttribute (属性名)メソッド
・引数で指定した属性の属性値を取得
■setAttribute ( 属性名, 属性値 )メソッド
・引数の属性名に属性値を設定する
・document.getElementById('sampl').href = "abc";
document.getElementById('sample').src = "xyz";
は
document.getElementById('sample').setAttribute ('href','abc');
document.getElementById('sample').setAttribute ('srcf','xyz');
と同じことになる。
↑[Sample 2]のスタイルを変更します
Sample Source......................................................................>>>
<script language="JavaScript"><!--
function ImgAttr(){ //属性値を取得し、アラート表示する
var pho = document.getElementById("target").getElementsByTagName("img");
var attr_src = pho[0].getAttribute("src");
var attr_width = pho[0].getAttribute("width");
var attr_height = pho[0].getAttribute("height");
var attr_alt = pho[0].getAttribute("alt");
alert("ファイル名は：＜" + attr_src + "＞\n画像の幅は：" + attr_width
+ "ピクセル、高さは：" + attr_height +
"ピクセル\n\n" + attr_alt);
}
function ImgSet(){ //２枚目の写真にする
var pho = document.getElementById("target").getElementsByTagName("img");
pho[0].setAttribute("src","../../yama/atago/kiyotaki08.jpg");
pho[0].setAttribute("width","400");
pho[0].setAttribute("height","315");
pho[0].setAttribute("alt","清滝川にかかる朱色の橋。これを渡ると愛宕山への登山道へ");
}
function ImgRes(){ //最初の写真に戻す
var pho = document.getElementById("target").getElementsByTagName("img");
pho[0].setAttribute("src","../../yama/atago/kiyotaki07.jpg");
pho[0].setAttribute("width","400");
pho[0].setAttribute("height","310");
pho[0].getAttribute("alt","清滝川に沿った景勝地。京都の奥座敷といわれ、桜・紅葉の名所。");
}
function StyleChange(n){ //スタイルの変更
var samp = document.getElementById("test");
if(n == 1)samp.setAttribute ("style","background-color:lavender;color:red;border-color:pink");
if(n == 2)samp.setAttribute ("style","background-color:powderblue;color:blue;border-color:navy");
if(n == 3)samp.setAttribute ("style"," ");
}
//--></script>
</head>
<body>
<h5 class="sample">Sample 1</h5>
<p id="target"><img src="../../yama/atago/kiyotaki07.jpg" width="400" height="310" border="0"
alt="清滝川に沿った景勝地。京都の奥座敷といわれ、桜・紅葉の名所。">
<button onclick="ImgAttr()">この写真の詳細情報</button>
<button onclick="ImgSet()">もう一枚あります</button>
<button onclick="ImgRes()">最初の写真へ</button>
</p>
<h5 id="test" class="sample">Sample 2</h5>
<p>↑[Sample 2]のスタイルを変更します
<button onclick="StyleChange(1)">スタイル 1</button>
<button onclick="StyleChange(2)">スタイル 2</button>
<button onclick="StyleChange(3)">元のスタイル</button>
</p>