HTML 属性を操作

このページでは？

このページではオブジェクトとして取得した HTML 要素の属性を操作する方法を紹介します。DOMでは属性を操作する方法が多く紹介されていますがよく使われる方法をいくつか紹介します。

HTML 属性を操作～プロパティ

HTML 要素の属性を操作する方法としてここではプロパティを使った方法を紹介します。※ 下記の書式の中にあるobj はある要素オブジェクトが格納されているとします。

HTML 属性と DOM のプロパティ

DOM では HTML 属性がそのままプロパティとして定義されています。これらのプロパティにアクセスしてその値を参照・設定することが可能です。

【注意】　HTML 文書では属性名に大文字・小文字の区別はありませんが、DOM でプロパティとして扱う場合には小文字で記述します。属性名が「-」（ハイホン）で連結されている場合には「-」を取り除いて後半の語句の先頭の文字を大文字で記述します。例えば META 要素の属性の http-equiv は httpEquiv となります。また、HTML 属性の中で予約語と重複するものは名前が変更されています。例えば、class 属性は className となっています。

HTML 属性の参照・設定

ある要素の属性を参照、設定するには次のように記述します。

obj.属性名
obj.属性名 = "属性値"

次の例はINPUT要素のvalue属性を参照、設定しています。

     *** BODY 要素内 ***

<INPUT type="text" value="暑いねえ、夏は" id="tbox">

     *** JavaScript 部分 ***

obj = document.getElementById("tbox");
v = obj.value; // value属性を参照
obj.value = "寒いねえ、冬は"; // 新しいvalue属性値を設定

上記の例を参考にしたサンプルを作ってみました。ボタンを交互に押して確認してみてください。

◆サンプル

◆ソース内容

<SCRIPT type="text/JavaScript">
<!--
var mes1="寒いねえ、冬は";
var mes2="暑いねえ、夏は";
function showMes(){
    if(document.getElementById){
        var obj=document.getElementById("tbox");
        alert(obj.value);
    }
}
function setMes(val){
    if(document.getElementById){
        var obj=document.getElementById("tbox");
        obj.value=val;
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P><INPUT type="text" value="暑いねえ、夏は" id="tbox"></P>
<P>
<INPUT type="button" value="参照" onclick="showMes()">
<INPUT type="button" value="冬" onclick="setMes(mes1)">
<INPUT type="button" value="夏" onclick="setMes(mes2)">
</P>

スタイルを操作する

ある要素のスタイルを参照、設定するには次のように記述します。

obj.style.スタイルプロパティ名
obj.style.スタイルプロパティ名 = "値"

※ スタイルプロパティ名が「-」（ハイホン）で連結されている場合には「-」を取り除いて後半の語句を大文字で記述します。例えば「font-size」は「fontSize」になります。

次の例はテキストの配置を参照し、右に設定しています。

     *** BODY 要素内 ***

<P id="sampText1">サンプルテキスト</P>

     *** JavaScript 部分 ***

obj = document.getElementById("sampText");
posi = obj.style.textAlign; // スタイル属性のtext-alignを参照
obj.style.textAlign = "right"; // text-alingをrightに設定

【注意】　この方法で操作されるスタイルは <タグ名 STYLE = " ... "> で指定されるスタイル属性（インラインスタイル）であって、STYLE 要素や LINK 要素で指定されたスタイルではありません。よって、インラインスタイルの指定がない場合やJavaScriptでスタイルを設定していない場合にはスタイルを参照しても（null）が返るだけです。

上記の例を参考にしたサンプルを作ってみました。ボタンを交互に押して確認してみてください。

◆サンプル

サンプルテキスト

◆ソース内容

<SCRIPT type="text/JavaScript">
<!--
function showAlign(){
    if(document.getElementById){
        var obj=document.getElementById("sampTxt1");
        alert(obj.style.textAlign);
    }
}
function setAlign(posi){
    if(document.getElementById){
        var obj=document.getElementById("sampTxt1");
        obj.style.textAlign=posi;
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<P id="sampTxt1">サンプルテキスト</p>
<P>
<INPUT type="button" value="参照" onclick="showAlign()">
<INPUt type="button" value="右" onclick="setAlign('right')">
<INPUt type="button" value="左" onclick="setAlign('left')">
</P>