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!,
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>
