Podemos usar dos enfoques para modificar un atributo de un elemento HTML usando JavaScript.
Enfoque 1:
Podemos usar la función setAttribute() incorporada de JavaScript.
Sintaxis:
var elementVar = document.getElementById("element_id");
elementVar.setAttribute("attribute", "value");
Básicamente, lo que estamos haciendo es inicializar el elemento en JavaScript obteniendo su id y luego usando setAttribute() para modificar su atributo.
Ejemplo: A continuación se muestra la implementación del enfoque anterior.
html
<!DOCTYPE html>
<html>
<head>
<title>Modify attributes method 1</title>
<script>
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");
}
</script>
</head>
<body>
<h1 style="color:black"
id="heading"
align="center">
GeeksForGeeks
</h1>
<p id="tagLine" align="center"> - Society Of Geeks
<br>
<br>
<button onclick="modify()"> Click to modify </button>
</p>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
Podemos modificar los atributos HTML incluso sin usar la función setAttribute() de la siguiente manera:
document.getElementById("element_id").attribute = attribute_value;
Ejemplo: A continuación se muestra la implementación del enfoque anterior:
html
<!DOCTYPE html>
<html>
<head>
<title>Modify attributes method 2</title>
<script>
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 */
}
</script>
</head>
<body>
<h1 style="color:green" align="center">GeeksForGeeks</h1>
<p align="center">
<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>
<b><p id="result" align="center"></p>
</b>
</p>
</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 AshaRamMeena y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA