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

我们可以使用两种方法来使用 JavaScript 修改 HTML 元素的属性。
方法一：
我们可以使用 JavaScript 的内置 setAttribute()函数。
句法：

var elementVar = document.getElementById("element_id");
elementVar.setAttribute("attribute", "value");

所以基本上我们所做的就是在 JavaScript 中通过获取它的 id 来初始化元素，然后使用 setAttribute() 来修改它的属性。
示例：以下是上述方法的实现。

html

 

    Modify attributes method 1
    
        function modify() {
 
            //update style attribute of element "heading"
 
            var heading = document.getElementById("heading");
            heading.setAttribute("style", "color:green");
 
            //add style attribute to element "tagLine"
 
            var tagLine = document.getElementById("tagLine");
            tagLine.setAttribute("style", "color:blue");
        }
    

 

 
    
      GeeksForGeeks
  
 
     - Society Of Geeks
        
        
         Click to modify 
    
 

 

输出：

• 在点击按钮之前：
  

• 点击按钮后：
  

方法二：

即使不使用 setAttribute()函数，我们也可以修改 HTML 属性，如下所示：

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

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

html

 

    Modify attributes method 2
    
        function add() {
 
            //get the values of fNum and sNum using getAttribute()
 
            var fNum = Number(document.getElementById("fNum").value);
            var sNum = Number(document.getElementById("sNum").value);
            var result = fNum + sNum;
 
            //output the result in green colour
            var output = "Sum of two numbers is " + result;
            document.getElementById("result").style = "color:green";
            document.getElementById("result").innerHTML = output;
 
            /*note the way we have updated innerHTML and added style
              attribute of "result" element */
 
        }
    

 

 
    GeeksForGeeks
 
    
        Enter first number :- 
        
        
        
        Enter second number :- 
        
        
        
        Add
        

 
    
 

 

输出：

• 在点击按钮之前：
  

• 点击按钮后：