Comment modifier les attributs d'un élément en javascript

Méthode JS pour modifier les attributs des éléments : 1. Utilisez l'instruction "Element Object.setAttribute('Attribute','Attribute Value')" ; 2. Utilisez l'instruction "Element Object.style.Attribute Name='Attribute Value'" ; 3. , utilisez l'instruction "Element object.style.cssText='Attribute name:Attribute value;'".

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

javascript pour modifier les attributs de l'élément

Méthode 1 : Utilisez la méthode setAttribute()

setAttribute() pour ajouter l'attribut spécifié et lui attribuer la valeur spécifiée. Si cette propriété spécifiée existe déjà, la valeur est uniquement définie/modifiée.

Syntaxe : 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='属性名:属性值;'

Exemple :

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

Rendu :

Méthode 2 : Modifier directement via l'objet de style du nœud de l'élément

🎜Syntaxe : Element object.style.Attribute name='attribute value';🎜🎜🎜Exemple : 🎜rrreee🎜Rendu : 🎜🎜🎜🎜🎜Méthode 3 : Utiliser l'attribut cssText🎜🎜🎜Syntaxe : Element object.style.cssText='Nom de l'attribut : Valeur de l'attribut ;';🎜🎜🎜Exemple : 🎜rrreee🎜Rendu : 🎜🎜🎜🎜🎜[Apprentissage recommandé : 🎜Tutoriel avancé javascript🎜]🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!