Verificar si un elemento tiene un atributo (hasAttribute)

El método hasAttribute() devuelve un valor Booleano indicando si el elemento tiene el atributo especificado o no.

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');