 |
Verificar si un elemento tiene un atributo (hasAttribute)
El método hasAttribute() devuelve verdadero si el atributo especificado existe; de lo contrario, devuelve falso.
Consejo: use setAttribute() para agregar un nuevo atributo o cambiar el valor de un atributo existente en un elemento.
Sintaxis
var resultado = elemento.hasAttribute(nombre);
Parámetros
- resultado contendrá el valor devuelto (true o false).
- nombre consiste en una cadena de caracteres que representa el nombre del atributo a chequear.
Ejemplo
Descubra si un elemento <button> tiene un atributo onclick:
<!DOCTYPE html>
<html>
<body>
<p>Haga clic en el botón para averiguar si el elemento del botón tiene un atributo onclick.</p>
<button id="myBtn" onclick="myFunction()">Prueba</button>
<p>Internet Explorer 8 y versiones anteriores no admiten el método hasAttribute ().</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myBtn").hasAttribute("onclick");
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Ejemplo:
Disponer una tabla de dos filas y dos columnas. Mediante un botón verificar si el elemento "table" tiene la propiedad border. En caso que la tenga proceder a eliminarla y si no la tiene fijar dicha propiedad con el valor 5.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
function cambiarAtributo()
{
var reftabla=document.getElementById('tabla1');
if (reftabla.hasAttribute('border'))
reftabla.removeAttribute('border');
else
reftabla.setAttribute('border','5');
}
</script>
</head>
<body>
<table id="tabla1">
<tr>
<td>11</td><td>12</td>
</tr>
<tr>
<td>21</td><td>22</td>
</tr>
</table>
<input type="button" value="Cambiar" onClick="cambiarAtributo()">
</body>
</html>
Para controlar si un elemento HTML tiene un cierto atributo disponemos de un método llamado hasAttribute al que le pasamos como referencia el atributo a verificar su existencia:
objeto.getAttribute('atributo a verificar')
El código Javascript
function cambiarAtributo()
{
var reftabla=document.getElementById('tabla1');
if (reftabla.hasAttribute('border'))
reftabla.removeAttribute('border');
else
reftabla.setAttribute('border','5');
}
Extraemos la referencia de la tabla1:
var reftabla=document.getElementById('tabla1');
Llamamos al método hasAttribute mediante la referencia de la tabla y le pasamos como parámetro el atributo 'border':
if (reftabla.hasAttribute('border'))
En el caso que el método hasAttribute retorne verdadero procedemos a eliminar dicha propiedad:
reftabla.removeAttribute('border');
Por el else fijamos la propiedad border con el valor 5:
reftabla.setAttribute('border','5');