En esta parte del tutorial veremos como manejar los atributos de los elementos del DOM HTML a través de los métodos getAttribute(att), setAttribute(name, value) y removeAttribute(att).
El método getAttribute(att) nos permitirá obtener el valor del atributo del elemento seleccionado.
El método setAttribute(name, value) nos permitirá agregar un atributo con su respectivo valor al elemento seleccionado.
El método removeAttribute(att) nos permitirá eliminar el atributo del elemento seleccionado.
El código de ejemplo del capítulo ...
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function()
{
var btn_1 = document.getElementById("btn-1");
btn_1.onclick = function()
{
var box_style = document.getElementById("box").getAttribute("style");
alert(box_style);
}
var btn_2 = document.getElementById("btn-2");
btn_2.onclick = function()
{
document.getElementById("box").removeAttribute("style");
}
var btn_3 = document.getElementById("btn-3");
btn_3.onclick = function()
{
document.getElementById("box").setAttribute("style", "background: red; color: white; padding: 20px;");
}
}
</script>
</head>
<body>
<div id="box" style="background: red; color: white; padding: 20px;">Tutorial Javascript</div>
<button id="btn-1" type="button">Obtener valor del atributo style</button>
<button id="btn-2" type="button">Eliminar atributo style</button>
<button id="btn-3" type="button">Crear atributo style</button>
</body>
</html>
No hay comentarios:
Publicar un comentario