So ändern Sie Elementattribute in Javascript

So ändern Sie Elementattribute in js: 1. Verwenden Sie die Anweisung „element object.setAttribute('attribute','attribute value')“ 2. Verwenden Sie die Anweisung „element object.style.Attribute name='attribute value'“; Anweisung; 3. Verwenden Sie die Anweisung „Element object.style.cssText='Attribute name:Attribute value;'“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Javascript zum Ändern der Attribute des Elements

Methode 1: Verwenden Sie die Methode setAttribute()

setAttribute(), um das angegebene Attribut hinzuzufügen und ihm den angegebenen Wert zuzuweisen. Wenn diese angegebene Eigenschaft bereits vorhanden ist, wird der Wert nur gesetzt/geändert.

Syntax: Element object.setAttribute('Attribute','Attribute value');元素对象.setAttribute('属性','属性值');

示例：

<div>hello</div> 
<div id="box">欢迎来到PHP中文网！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.setAttribute(&#39;style&#39;,&#39;color:red;border:1px solid #008000&#39;);
	// 给box元素设置的是行内样式
</script>

效果图：

方法2：直接通过元素节点的style对象修改

语法：元素对象.style.属性名='属性值';

示例：

<div>hello</div> 
<div id="box">欢迎来到PHP中文网！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.style.color=&#39;#fff&#39;;
	box.style.backgroundColor=&#39;#ff6c8c&#39;;
	box.style.padding=&#39;10px&#39;;
</script>

效果图：

方法3：使用cssText 属性

语法：元素对象.style.cssText='属性名:属性值;'

Beispiel:

<div>hello</div> 
<div id="box">欢迎来到PHP中文网！</div> 
<script type="text/javascript">
	var box=document.getElementById("box");
	box.style.cssText=&#39;color:#fff;background-color:#ffaa00;padding:10px;&#39;;
</script>

Rendering:

Methode 2: Direkt über das Stilobjekt des Elementknotens ändern

🎜Syntax: Element object.style.Attribute name='attribute value';🎜🎜🎜Beispiel: 🎜rrreee🎜Rendering: 🎜🎜🎜🎜🎜Methode 3: Verwenden Sie das cssText-Attribut🎜🎜🎜Syntax: Element object.style.cssText='Attribute name:Attribute value;';🎜🎜🎜Beispiel: 🎜rrreee🎜Rendering: 🎜🎜🎜🎜🎜[Empfohlenes Lernen: 🎜Javascript-Tutorial für Fortgeschrittene🎜]🎜

Das obige ist der detaillierte Inhalt vonSo ändern Sie Elementattribute in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!