JavaScript で HTML タグの属性を変更する方法

JavaScript で属性を変更する方法: まず getElementById()、getElementsByName()、または getElementsByTagName() を使用して DOM オブジェクトを取得し、次に「DOM object.Attribute name = value;」を使用して属性を変更します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 5、Dell G3 コンピューター。

HTML DOM オブジェクト

JavaScript の観点から見ると、Web ページ上の各 HTML タグは DOM オブジェクトであり、その属性はタグ これは DOM オブジェクトのプロパティでもあります。例:

173dc41b602843afb86eee56ef8f0692

JavaScript からこの a1f02c36ba31691bcfe87b2722de723b タグは、DOM オブジェクトの一種である Image オブジェクトであると思われます。 id、src、width、border 属性の値が指定されており、その他の属性はデフォルト値を採用します。

JavaScript プログラムを使用して DOM オブジェクトにアクセスできますが、実際には、プログラムを使用して HTML タグにアクセスします。 DOM オブジェクトの属性をプログラムで変更できます。つまり、プログラムを使用して HTML タグの属性を変更し、タグを制御可能にします。

DOM オブジェクトの属性は、通常、対応する HTML タグの属性に対応し、名前も通常は同じですが、DOM オブジェクトの属性は大文字と小文字を区別する必要があります。たとえば、 border 属性は、a1f02c36ba31691bcfe87b2722de723b、f5d188ed2c074f8b944552db028f98a1 などの複数のタグと、対応する DOM オブジェクトで使用できます。 ImageオブジェクトやTableオブジェクトなどにもborder属性があり、valueメソッドも同様です。

一部の DOM 属性の名前は HTML タグの属性名と異なりますが、実際には同じ属性です。たとえば、HTML タグの class 属性に対応する DOM 属性は className です (大文字と小文字に注意してください)。これは、クラスが JavaScript の予約語であり、属性名に予約語と同じ名前を付けることができないためです。

DOM 属性の中には、対応する HTML 属性を持たないものもあります。たとえば、innerHTML は、タグに含まれるコンテンツを表す DOM 属性です。この属性を使用して、HTML の開始タグと終了タグの間のコンテンツを変更します。ただし、a1f02c36ba31691bcfe87b2722de723b などの単一タグの場合、対応する Image オブジェクトには innerHTML 属性がありません。

さらに、DOM オブジェクトには、プログラム内で呼び出すことができるメソッドも用意されています。

実際、DOM オブジェクトは JavaScript 固有のオブジェクトではなく、クロスプラットフォーム オブジェクトであり、多くの言語が DOM オブジェクトへのアクセスをサポートしています。 JavaScript はその 1 つにすぎません。

オブジェクトの取得

JavaScript を使用して HTML タグの属性を設定または変更する場合、最初に行うことはオブジェクトを取得することです。タグに対応する DOM オブジェクト。一般的に使用されるメソッドは次のとおりです:

1. id を使用して DOM オブジェクトを取得します:

タグに id 属性が設定されている場合、id 値を使用してアクセスできます。タグとその JavaScript コードは次のとおりです。

<span class="c2"></span>##

<code>document.getElementById( id )<br/></code>

document は BOM オブジェクトであり、現在のHTML ドキュメント。getElementById は Document オブジェクトのメソッドです。id は Web ページ内の HTML タグの id 属性値です。

document.getElementById( id ) 戻り値はオブジェクト データ、つまり DOM オブジェクトです。

2. name を使用して DOM オブジェクトを取得します:

タグに name 属性が設定されている場合、name 値を使用してタグにアクセスできます。コードは:

document.getElementsByName( name )

注: Web ページで、ラベルに id 属性が設定されている場合、各ラベルの id 属性値を同じにすることはできません。ラベルに name 属性が設定されている場合、Web ページ内に同じ name 属性値を持つ複数のタグが存在する可能性があります。

つまり、

document.getElementsByName( name ) 戻り値は単一のオブジェクトではなく、このオブジェクトの同じ名前値を持つすべてのタグを含む DOM オブジェクトの配列です。ページに

3. タグ名を使用して DOM オブジェクトを取得します:

タグ名を直接使用して指定されたタグにアクセスでき、その JavaScript コードは次のとおりです:

<span class="c2"></span>

document.getElementsByTagName( tagname )

注: 同じタグが Web ページ内で複数回出現する可能性があるため、document.getElementsByTagName(tagname) の戻り値は) 値は、このページ上の指定された種類のすべてのタグを含む DOM オブジェクトの配列でもあります。

比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个a1f02c36ba31691bcfe87b2722de723b 标签，数组中的元素按 a1f02c36ba31691bcfe87b2722de723b 标签出现的顺序排列。

比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。

设置或修改标签的属性

获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是：

<span class="c2"></span>

DOM对象.属性名 = 值;

DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。

例1：

<img id="image1" src="./image/2.jpg" border="0" /> 
 <button οnclick="setBorder(0)">border="0"</button> 
 <button οnclick="setBorder(1)">border="1"</button> 
 <button οnclick="setBorder(3)">border="3"</button> 
 <button οnclick="setBorder(8)">border="8"</button> 
 <script type="text/javascript"> 
 function setBorder( n ) 
 { 
     document.getElementById( "image1" ).border = n; 
 } 
 </script>

本例可以通过按钮修改 a1f02c36ba31691bcfe87b2722de723b 标签的 border 属性的值。

首先，为了可以访问这个 a1f02c36ba31691bcfe87b2722de723b 标签，为它定义了 id="image1" 属性。

在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 JS 函数 setBorder()。

在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取a1f02c36ba31691bcfe87b2722de723b 标签对应的 Image 对象，并为它的 border 属性设置新值。

例2：

<marquee id="Mar">欢迎光临！</marquee> 
 <p><button οnclick="setDir()">改变方向</button></p> 
 <script type="text/javascript"> 
 var dir = "left"; 
 function setDir() 
 { 
     dir = (dir=="left") ? "right" : "left"; 
     document.getElementById( "Mar" ).direction = dir; 
 } 
 </script>

本例利用按钮修改 ed126914ed1419bab26abf7cf307b7b9 标签的 direction 属性的值。

ed126914ed1419bab26abf7cf307b7b9 标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。

【推荐学习：javascript高级教程】

以上がJavaScript で HTML タグの属性を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。