La tarea es copiar todos los atributos de un elemento y aplicarlos a otro con la ayuda de javaScript. Aquí se discuten 2 enfoques.
Enfoque 1:
- Seleccione ambos elementos (objetivo y elemento de origen).
- Obtenga las propiedades del elemento fuente utilizando el método el.prop(‘attributes’) .
- Use el método .each() en cada propiedad de objeto y establezca esa propiedad en el elemento de destino usando el método .attr() .
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Copy all the attributes of one element
and apply them to another with JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<div id="el1" style="background: green;">
Element 1
</div>
<br>
<div id="el2">
Element 2
</div>
<br>
<button onclick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style="color: green;">
</p>
<script>
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.";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Seleccione ambos elementos (objetivo y elemento de origen).
- Obtenga las propiedades del elemento fuente utilizando la propiedad el.attributes .
- Use el método .forEach() en cada propiedad y establezca esa propiedad en el elemento de destino usando el método .setAttribute() .
Ejemplo 2: Este ejemplo implementa el enfoque anterior.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>
Copy all the attributes of one element
and apply them to another with JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<div id="el1" style="background: green;
color: white; font-size: 26px;">
Element 1
</div>
<br>
<div id="el2">
Element 2
</div>
<br>
<button onclick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style="color: green;">
</p>
<script>
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.";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA