How to modify the attributes of element nodes in javascript

Modification method: 1. Use the setAttribute() method to modify the value of the node attribute, the syntax "node.setAttribute(attribute name, value)"; 2. Use the removeAttribute() method to delete the specified attribute, the syntax "node .removeAttribute(attribute name)".

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Javascript modifies the attributes of the element node

setAttribute() method to set the attribute value

Use The element's setAttribute() method can set the element's attribute value. The usage is as follows:

setAttribute(name, value)

The parameters name and value represent the attribute name and attribute value respectively. Property names and property values ​​must be passed as strings. If the specified attribute exists in the element, its value will be refreshed; if it does not exist, the setAttribute() method will create the attribute for the element and assign a value.

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

removeAttribute() method removes attributes

Use the element's removeAttribute() method to remove the specified attribute. The usage is as follows:

removeAttribute(name)

Parameter name represents the attribute name of the element.

Example:

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

In the above example, two buttons are designed and bound to different event handling functions. Click the "Delete" button to call the table's removeAttribute() method to clear the table border, and click the "Restore" button to call the table's setAttribute() method to reset the thickness.

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to modify the attributes of element nodes in javascript. For more information, please follow other related articles on the PHP Chinese website!