Comment modifier les attributs des nœuds d'éléments en javascript

Méthode de modification : 1. Utilisez la méthode setAttribute() pour modifier la valeur de l'attribut du nœud, la syntaxe est "node.setAttribute(attribute name, value)" ; 2. Utilisez la méthode removeAttribute() pour supprimer l'attribut spécifié ; , la syntaxe est "node.removeAttribute(attribute) name)".

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

javascript modifie les attributs du nœud de l'élément

méthode setAttribute() pour définir la valeur de l'attribut

Utilisez la méthode setAttribute() de l'élément pour définir la valeur de l'attribut de l'élément. L'utilisation est la suivante :

setAttribute(name, value)

Le nom et la valeur des paramètres représentent respectivement le nom et la valeur de l'attribut. Les noms de propriétés et les valeurs de propriétés doivent être transmis sous forme de chaînes. Si l'attribut spécifié existe dans l'élément, sa valeur sera actualisée ; s'il n'existe pas, la méthode setAttribute() créera l'attribut pour l'élément et attribuera une valeur.

<div id="red">红盒子</div>
<div id="blue">蓝盒子</div>
<script>
    var red = document.getElementById("red");  //获取红盒子的引用
    var blue= document.getElementById("blue");  //获取蓝盒子的引用
    red.setAttribute("title", "这是红盒子");  //为红盒子对象设置title属性和值
    blue.setAttribute("title", "这是蓝盒子");  //为蓝盒子对象设置title属性和值
</script>

La méthoderemoveAttribute() supprime les attributs

Utilisez la méthode removeAttribute() de l'élément pour supprimer l'attribut spécifié. L'utilisation est la suivante :

removeAttribute(name)

Le nom du paramètre représente le nom de l'attribut de l'élément.

Exemple :

<script>
    window.onload = function () {  //绑定页面加载完毕时的事件处理函数
        var table = document.getElementByTagName("table")[0];  //获取表格外框的引用
        var del = document.getElementById("del");
        var reset = document.getElementById("reset");
        del.onclick = function () {
            table.removeAttribute("border");
        }
        reset.onclick = function () {
            table.setAttribute("border", "2");
        }
</script>
<table width="100%" border="2">
    <tr>
        <td>数据表格</td>
    <tr>
</table>
<button id="del">删除</button><button id="reset">恢复</button>

Dans l'exemple ci-dessus, deux boutons sont conçus et liés à différentes fonctions de gestion d'événements. Cliquez sur le bouton "Supprimer" pour appeler la méthode removeAttribute() du tableau afin d'effacer la bordure du tableau, puis cliquez sur le bouton "Restaurer" pour appeler la méthode setAttribute() du tableau afin de réinitialiser l'épaisseur.

【Recommandations associées : Tutoriel d'apprentissage 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!