JavaScript 如何向HTML元素添加/更新属性

在本文中，我们将看到如何使用JavaScript向HTML元素添加/更新属性。有两种方法可以修改HTML元素的属性，这些方法如下。

使用setAttribute()方法
使用HTML DOM Attributes属性

方法1：使用setAttribute()方法

它用于向特定元素添加属性并为其提供一个值。如果属性已经存在，它只是修改或设置其值。 ****

语法：

let elements = document.getElementById( "element_id" );  
elements.setAttribute( "attribute", "value" );

在JavaScript中，我们通过获取元素的id来对它进行初始化，并使用setAttribute()方法来修改它的属性。

示例： 下面是实现上述方法的代码示例。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <script>
        function modify() {
 
            // Update style attribute of element "heading"
            let heading = document.getElementById("heading");
            heading.setAttribute("style", "color:green");
 
            // Add style attribute to element "tagLine"
            let tagLine = document.getElementById("tagLine");
            tagLine.setAttribute("style", "color:blue");
        }
    </script>
</head>
 
<body>
    <h1 id="heading">
        GeeksforGeeks
    </h1>
 
    <p id="tagLine">- Society Of Geeks</p>
 
    <button onclick="modify()">
        Click to modify
    </button>
</body>
 
</html>

输出：

JavaScript 如何向HTML元素添加/更新属性

方法2：使用HTML DOM属性属性

我们可以通过使用HTML DOM属性属性来修改HTML属性。

document.getElementById("element_id").attribute_name = attribute_value;

示例： 以下是上述方法的实现：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
 
    <script>
        function add() {
 
            // Get the values of fNum and sNum using getAttribute()
            const fNum = Number(document.getElementById("fNum").value);
            const sNum = Number(document.getElementById("sNum").value);
            const result = fNum + sNum;
 
            // Output the result in green colour
            const output = "Sum of two numbers is " + result;
            document.getElementById("result").style = "color:green";
            document.getElementById("result").innerHTML = output;
        }
    </script>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <b>Enter first number :- </b>
    <input type="number" id="fNum">
    <br><br>
 
    <b>Enter second number :- </b>
    <input type="number" id="sNum">
    <br><br>
     
    <button onclick="add()">Add</button>
 
    <p id="result"></p>
</body>
 
</html>

输出：

JavaScript 如何向HTML元素添加/更新属性