So ändern Sie HTML-Tag-Attribute in JavaScript
So ändern Sie Attribute in JavaScript: Verwenden Sie zuerst getElementById(), getElementsByName() oder getElementsByTagName(), um das DOM-Objekt abzurufen;
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 5, Dell G3-Computer.
HTML-DOM-Objekt
Aus JavaScript-Sicht ist jedes HTML-Tag auf der Webseite ein DOM-Objekt, und die Attribute des Tags sind auch die Attribute des DOM-Objekts. Zum Beispiel:
Aus JavaScript-Sicht ist dies < img> ;-Tag ist ein Image-Objekt, das eine Art DOM-Objekt ist. Die Werte der Attribute id, src, width und border wurden angegeben, und andere Attribute übernehmen Standardwerte.
Sie können JavaScript-Programme verwenden, um auf DOM-Objekte zuzugreifen. Tatsächlich verwenden Sie Programme, um auf ein HTML-Tag zuzugreifen. Sie können die Attribute eines DOM-Objekts programmgesteuert ändern, d. h. mit einem Programm die Attribute eines HTML-Tags ändern, um das Tag steuerbar zu machen.
Die Attribute des DOM-Objekts entsprechen normalerweise den Attributen des entsprechenden HTML-Tags, und die Namen sind normalerweise gleich, aber bei den Attributen des DOM-Objekts muss die Groß-/Kleinschreibung beachtet werden. Beispielsweise kann das Attribut border in mehreren Tags wie Es gibt einige DOM-Attribute, deren Namen sich von denen von HTML-Tags unterscheiden, aber es handelt sich tatsächlich um dasselbe Attribut. Beispielsweise ist das DOM-Attribut, das dem Attribut class des HTML-Tags entspricht, className (beachten Sie die Groß- und Kleinschreibung). Dies liegt daran, dass „Klasse“ in JavaScript ein reserviertes Wort ist und Attributnamen nicht denselben Namen wie reservierte Wörter haben können. Es gibt auch einige DOM-Attribute, die keine entsprechenden HTML-Attribute haben. Beispielsweise ist innerHTML ein DOM-Attribut, das den in einem Tag enthaltenen Inhalt darstellt. Verwenden Sie dieses Attribut, um den Inhalt zwischen dem öffnenden Tag und dem schließenden Tag eines HTML-Codes zu ändern. Aber für ein einzelnes Tag wie Darüber hinaus stellt das DOM-Objekt auch Methoden zur Verfügung, die im Programm aufgerufen werden können. Tatsächlich ist das DOM-Objekt kein JavaScript-spezifisches Objekt, sondern ein plattformübergreifendes Objekt, und viele Sprachen bieten Unterstützung für den Zugriff auf DOM-Objekte. JavaScript ist nur eines davon. Abrufen des Objekts Wenn Sie JavaScript zum Festlegen oder Ändern der Attribute eines HTML-Tags verwenden, müssen Sie zunächst das dem Tag entsprechende DOM-Objekt abrufen. Häufig verwendete Methoden sind: 1. Verwenden Sie die ID, um das DOM-Objekt abzurufen: Wenn ein Tag das ID-Attribut festlegt, können wir den ID-Wert verwenden, um auf das Tag zuzugreifen: document.getElementById( id ) 2. Verwenden Sie den Namen, um das DOM-Objekt abzurufen: Wenn für ein Tag das Namensattribut festgelegt ist, können wir den Namenswert verwenden, um auf das Tag zuzugreifen: Der Rückgabewert von document.getElementsByName( name ) 3. Rufen Sie das DOM-Objekt mithilfe des Tag-Namens ab: 比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个 比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。 设置或修改标签的属性 获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是： DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。 例1： 本例可以通过按钮修改 首先，为了可以访问这个 在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 JS 函数 setBorder()。 在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取 例2： 本例利用按钮修改 标签的 direction 属性的值。 标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。 【推荐学习：javascript高级教程】 Das obige ist der detaillierte Inhalt vonSo ändern Sie HTML-Tag-Attribute in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website! KI-gestützte App zum Erstellen realistischer Aktfotos Online-KI-Tool zum Entfernen von Kleidung aus Fotos. Ausziehbilder kostenlos KI-Kleiderentferner Erstellen Sie kostenlos Ai Hentai. Einfach zu bedienender und kostenloser Code-Editor Chinesische Version, sehr einfach zu bedienen Leistungsstarke integrierte PHP-Entwicklungsumgebung Visuelle Webentwicklungstools Codebearbeitungssoftware auf Gottesniveau (SublimeText3) Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML. Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung. Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt. Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail. Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben. Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung. Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.,
usw. verwendet werden. Die entsprechenden DOM-Objekte wie Bildobjekte und Tabellenobjekte verfügen ebenfalls über Randattribute Wertmethoden sind ebenfalls gleich.
hat das entsprechende Image-Objekt kein innerHTML-Attribut.
<code><span class="c2"></span><code>document.getElementById( id )<br/></code>
document.getElementsByName( name )
Wenn auf einer Webseite das ID-Attribut für ein Tag festgelegt ist, kann der ID-Attributwert jedes Tags nicht gleich sein. Wenn das Namensattribut für das Tag festgelegt ist, kann es in einem Tag mehrere Tags mit demselben Namensattributwert geben Webseite. 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>
Heiße KI -Werkzeuge
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
AI Hentai Generator
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
SublimeText3 chinesische Version
Senden Sie Studio 13.0.1
Dreamweaver CS6
SublimeText3 Mac-Version
Heiße Themen
1378
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
