19 - Verificar si un elemento tiene un atributo (hasAttribute)


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.hasAttribute('atributo a verificar')

Para probar su funcionamiento dispongamos una tabla y mediante un único botón controlar si la tabla tiene el atributo border, en caso que no lo tenga se lo agregamos y si lo tiene procedemos a borrarlo.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</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()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

function cambiarAtributo() {
    let reftabla = document.getElementById('tabla1')
    if (reftabla.hasAttribute('border'))
        reftabla.removeAttribute('border')
    else
        reftabla.setAttribute('border', '5')
}

Extraemos la referencia de la tabla1:

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

Retornar