复制一个元素的所有属性并使用 JavaScript 将它们应用到另一个元素

任务是复制一个元素的所有属性，并在 JavaScript 的帮助下将它们应用到另一个元素。这里讨论了 2 种方法。

方法一：

• 选择两个元素（目标元素和源元素）。
• 使用el.prop('attributes') 方法获取源元素的属性。
• 对每个对象属性使用.each() 方法，并使用.attr() 方法将该属性设置为目标元素。

示例 1：此示例实现了上述方法。

HTML

 

    
        Copy all the attributes of one element
      and apply them to another with JavaScript.
    
    
    

 

     
            GeeksForGeeks 
        
    
    
 
 
    
        Element 1
    
    
    
        Element 2
    
    
    
        click here
    
    
    
 
 
    
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML =
"Click on the button to copy all the attributes of one "+
          "element and apply them to another.";
 
        function GFG_Fun() {
            var $el1 = $("#el1");
            var $el2 = $("#el2");
            var attrbts = $el1.prop("attributes");
            // loop through element1 attributes and apply them on element2.
            $.each(attrbts, function() {
                $el2.attr(this.name, this.value);
            });
            down.innerHTML =
              "All Attributes of Element 1 are copied to element 2.";
        }
    

 

输出：

• 在点击按钮之前：

• 点击按钮后：

方法二：

• 选择两个元素（目标和源元素）。
• 使用el.attributes 属性获取源元素的属性。
• 对每个属性使用.forEach() 方法，并使用.setAttribute() 方法将该属性设置为目标元素。

示例 2：此示例实现了上述方法。

HTML

 

    
        Copy all the attributes of one element
      and apply them to another with JavaScript.
    
    
    

 

     
            GeeksForGeeks 
        
    
    
 
 
    
        Element 1
    
    
    
        Element 2
    
    
    
        click here
    
    
    
 
 
    
        var up = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        up.innerHTML =
"Click on the button to copy all the attributes of one element"+
        " and apply them to another.";
 
        function copyAttrs(target, source) {
            [...source.attributes].forEach(attr => {
                target.setAttribute(attr.nodeName, attr.nodeValue)
            })
        }
 
        function GFG_Fun() {
            var el1 = document.getElementById("el1");
            var el2 = document.getElementById("el2");
            copyAttrs(el2, el1);
            down.innerHTML =
              "All Attributes of Element 1 are copied to element 2.";
        }
    

 

输出：

• 在点击按钮之前：

• 点击按钮后：