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 オブジェクトのプロパティでもあります。例:
JavaScript からこの タグは、DOM オブジェクトの一種である Image オブジェクトであると思われます。 id、src、width、border 属性の値が指定されており、その他の属性はデフォルト値を採用します。
JavaScript プログラムを使用して DOM オブジェクトにアクセスできますが、実際には、プログラムを使用して HTML タグにアクセスします。 DOM オブジェクトの属性をプログラムで変更できます。つまり、プログラムを使用して HTML タグの属性を変更し、タグを制御可能にします。
DOM オブジェクトの属性は、通常、対応する HTML タグの属性に対応し、名前も通常は同じですが、DOM オブジェクトの属性は大文字と小文字を区別する必要があります。たとえば、 border 属性は、 一部の DOM 属性の名前は HTML タグの属性名と異なりますが、実際には同じ属性です。たとえば、HTML タグの class 属性に対応する DOM 属性は className です (大文字と小文字に注意してください)。これは、クラスが JavaScript の予約語であり、属性名に予約語と同じ名前を付けることができないためです。 DOM 属性の中には、対応する HTML 属性を持たないものもあります。たとえば、innerHTML は、タグに含まれるコンテンツを表す DOM 属性です。この属性を使用して、HTML の開始タグと終了タグの間のコンテンツを変更します。ただし、 さらに、DOM オブジェクトには、プログラム内で呼び出すことができるメソッドも用意されています。 実際、DOM オブジェクトは JavaScript 固有のオブジェクトではなく、クロスプラットフォーム オブジェクトであり、多くの言語が DOM オブジェクトへのアクセスをサポートしています。 JavaScript はその 1 つにすぎません。 オブジェクトの取得 JavaScript を使用して HTML タグの属性を設定または変更する場合、最初に行うことはオブジェクトを取得することです。タグに対応する DOM オブジェクト。一般的に使用されるメソッドは次のとおりです: 1. id を使用して DOM オブジェクトを取得します: タグに id 属性が設定されている場合、id 値を使用してアクセスできます。タグとその JavaScript コードは次のとおりです。 document は BOM オブジェクトであり、現在のHTML ドキュメント。getElementById は Document オブジェクトのメソッドです。id は Web ページ内の HTML タグの id 属性値です。 document.getElementById( id ) 戻り値はオブジェクト データ、つまり DOM オブジェクトです。 2. name を使用して DOM オブジェクトを取得します: 注: Web ページで、ラベルに id 属性が設定されている場合、各ラベルの id 属性値を同じにすることはできません。ラベルに name 属性が設定されている場合、Web ページ内に同じ name 属性値を持つ複数のタグが存在する可能性があります。 document.getElementsByName( name ) 戻り値は単一のオブジェクトではなく、このオブジェクトの同じ名前値を持つすべてのタグを含む DOM オブジェクトの配列です。ページに 3. タグ名を使用して DOM オブジェクトを取得します: <span class="c2"></span> 注: 同じタグが Web ページ内で複数回出現する可能性があるため、document.getElementsByTagName(tagname) の戻り値は) 値は、このページ上の指定された種類のすべてのタグを含む DOM オブジェクトの配列でもあります。 比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个 比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。 设置或修改标签的属性 获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是： <span class="c2"></span> DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。 例1： 本例可以通过按钮修改 首先，为了可以访问这个 在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 JS 函数 setBorder()。 在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取 例2： 本例利用按钮修改 标签的 direction 属性的值。 标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。 【推荐学习：javascript高级教程】 以上がJavaScript で HTML タグの属性を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。 リアルなヌード写真を作成する AI 搭載アプリ 写真から衣服を削除するオンライン AI ツール。 脱衣画像を無料で AI衣類リムーバー AIヘンタイを無料で生成します。 使いやすく無料のコードエディター 中国語版、とても使いやすい 強力な PHP 統合開発環境 ビジュアル Web 開発ツール 神レベルのコード編集ソフト（SublimeText3） HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。 HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。 これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。 HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。 HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。 HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。 HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。、
などの複数のタグと、対応する DOM オブジェクトで使用できます。 ImageオブジェクトやTableオブジェクトなどにもborder属性があり、valueメソッドも同様です。
などの単一タグの場合、対応する Image オブジェクトには innerHTML 属性がありません。
<span class="c2"></span>##<code>document.getElementById( id )<br/></code>
document.getElementsByName( name )
document.getElementsByTagName( tagname )
标签，数组中的元素按
标签出现的顺序排列。
DOM对象.属性名 = 值;
<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" 属性。
标签对应的 Image 对象，并为它的 border 属性设置新值。
<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>
ホットAIツール
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
AI Hentai Generator
人気の記事
ホットツール
メモ帳++7.3.1
SublimeText3 中国語版
ゼンドスタジオ 13.0.1
ドリームウィーバー CS6
SublimeText3 Mac版
ホットトピック
7520
15
1378
52
81
11
21
68
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
