Atributos
El atributo style

<< Manipular el DOM Eventos >>

Dentro de los elementos HTML, y dependiendo del tipo de elemento, hay atributos estándar como name, id, href, src, etc. Se puede acceder a estos atributos directamente como propiedades del objeto para leerlos o modificarlos (ejemplo: elemento.href = "http://dominio.com").

Otras propiedades y métodos útiles para trabajar con los atributos son:

  • element.attributes → Devuelve el array con los atributos de un elemento
  • element.className → Se usa para acceder (leer o cambiar) al atributo class. Otros atributos a los que se puede acceder directamente son: element.id, element.title, element.style (propiedades CSS), … .
  • element.classList → Array de clases CSS del elemento. A diferencia de className, que es una cadena con las clases separadas por espacio, este atributo te las devuelve en forma de array o lista. Tiene métodos muy útiles para consultar y modificar clases como: classList.contains("clase")→ true si tiene la clase. classList.replace("clase1","clase2"): Quita la clase "clase1" y la sustituye por la clase "clase2". classList.add("clase1"): Añade la clase "clase1" al elemento. classList.remove("clase1"): Le quita la clase "clase1". classList.toggle("clase1"): Si no tiene "clase1", la añade. En caso contrario, la quita.
  • element.hasAttribute("attrName") → Devuelve cierto si el elemento tiene un atributo con el nombre especificado.
  • element.getAttribute("attrName") → Devuelve el valor del atributo.
  • element.setAttribute("attrName", "newValue") → Cambia el valor del atributo.
<!DOCTYPE>
<html>
    <head>
        <title>JS Example</title>
        <script src="./index.js" defer></script>
    </head>
    <body>
        <p><a id="toGoogle" href="https://google.es" class="normalLink">Google</a></p>
    </body>
</html>

El atributo style

El atributo style permite modificar las propiedades CSS asociadas a un elemento. La propiedad CSS a modificar deben escribirse con el formato camelCase, mientras que en CSS se emplea en el formato snake-case. Por ejemplo, al atributo background-color (CSS), se accede a partir de element.style.backgroundColor. El valor establecido a una propiedad será un string que contendrá un valor CSS válido para el atributo.

<!DOCTYPE>
<html>
    <head>
        <title>JS Example</title>
    </head>
    <body>
          <div id="normalDiv">I'm a normal div</div>
          <script src="./example1.js"></script>
    </body>
</html>

<< Manipular el DOM Eventos >>