JavaScript で HTML タグの属性を変更する方法-jsチュートリアル-php.cn

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

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

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

HTML DOM オブジェクト

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

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

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

DOM オブジェクトの属性は、通常、対応する HTML タグの属性に対応し、名前も通常は同じですが、DOM オブジェクトの属性は大文字と小文字を区別する必要があります。たとえば、 border 属性は、、

などの複数のタグと、対応する DOM オブジェクトで使用できます。 ImageオブジェクトやTableオブジェクトなどにもborder属性があり、valueメソッドも同様です。

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

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

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

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

オブジェクトの取得

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

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

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

##

<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 コードは次のとおりです:

document.getElementsByTagName( tagname )

ログイン後にコピー

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

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

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

设置或修改标签的属性

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

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>

ログイン後にコピー

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

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

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

在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取标签对应的 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>

ログイン後にコピー