setAttribute

属性の値を変更する

2010.03.01

構文
要素.setAttribute("属性","値")　[メソッド]
属性
値を設定する属性

説明

　指定した要素に設定した，属性の値を変更するメソッド。
　用例では，id名として「IMG」を設定した，document要素のimg要素が持っているborder属性，width属性，height属性，src属性の値を，setAttributeメソッドを使って変更している。用例のwidth属性やheight属性のように，JavaScriptでは読み出し専用で変更できなかった属性の多くも，DOM対応ブラウザでは変更できるようになっている。
　style要素の各属性など，属性の中には，「setAttribute」メソッドを使って，値を設定できない場合がある。このような場合は，直接属性に対し値を設定する必要がある。また反対に，img要素の「hspace」属性や「vspace」属性のように，直接属性に対し値を設定できず，値を設定する時にはsetAttributeメソッドを使用する必要がある属性もあるので，注意が必要である。
　Internet Explorerは，バージョン5以降，Mozilla系ブラウザではNavigator6.0以降で対応。

用例

ボタン・フォームをクリックした時，id名「IMG」を設定したimg要素の「border」属性，「width」属性，「height」属性，「src」属性の値を変更する。

<html><head>
<mata http-equiv="Content-Script-Type" content="text/javascript">
<mata http-equiv="Content-Style-Type" content="text/css">
<title>setAttribute</title>
<script type="text/javascript">
<!--
function Change_1(){document.getElementById("IMG").
setAttribute("border","20")}
function Change_2(){document.getElementById("IMG").
setAttribute("width","150")}
function Change_3(){document.getElementById("IMG").
setAttribute("height","200")}
function Change_4(){document.getElementById("IMG").
setAttribute("src","image2.jpg")}
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff }
-->
</style>
</head>
<body>
*属性の値を変更する
<hr>
<p>
<img src="image1.jpg" id="IMG" border="5" width="100" height="100"
 alt="setAttribute">
</p>
<form>
<input type="button" value="Border属性" onClick="Change_1()">
<input type="button" value="Width属性" onClick="Change_2()">
<input type="button" value="Height属性" onClick="Change_3()">
<input type="button" value="Src属性" onClick="Change_4()">
</form>
</body></html>