Cómo cambiar un atributo de una clase CSS con javascript

Escrito por sue smith Google | Traducido por john font
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cambiar un atributo de una clase CSS con javascript
Las funciones de JavaScript realizar lo que sucede cuando los usuarios interactúan con las páginas web. (Comstock/Comstock/Getty Images)

Cambiar un atributo de una clase en un elemento HTML (por sus siglas en inglés) con JavaScript, permite a los desarrolladores crear efectos interactivos en los sitios web. Utilizando una función de JavaScript, puedes determinar que comportamiento debe efectuarse cuando los usuarios interactúen con elementos de la página, alterando sus propiedades de estilo CSS (por sus siglas en inglés), en respuesta a esta interacción. La alteración de nombres de clase de atributo es una de las técnicas claves que participan en esta tarea, la cual es alcanzable, incluso para las personas que empiezan en el desarrollo web.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Crea tu página HTML con elementos para visualizar el contenido. Abre un nuevo archivo en un editor de texto y guárdalo con extensión "html", ingresando el siguiente código.

    <html> <head> </ head> <body> <div class="off"> Hello </ div> </ body> </ html>

    Éste código simplemente crea una página web con un solo elemento HTML en él. Al elemento, se ha asignado un atributo de clase con el nombre de "apagado". Esto indica el estado del elemento cuando el usuario no tiene su cursor del ratón sobre él.

  2. 2

    Crea tu código CSS. Abre un nuevo archivo en un editor de texto y guárdalo como "interactivestyle.css", para identificar el objetivo de la tarea que se lleva a cabo. Escribe el siguiente código:

    . off { color: # FF0000;} . over { color: # 0000FF;}

    Añade un enlace a tu archivo CSS en la sección de la cabecera de tu página HTML, entre las etiquetas de apertura y de cierre:

    <link rel="stylesheet" type="text/css" href="interactivestyle.css" />

  3. 3

    Crea dos funciones de JavaScript en la sección de cabecera de la página, ya sea antes o después del enlace a tu archivo CSS:

    <script type="text/javascript"> función overElement (elemRef) { / / mouse está sobre el elemento } función offElement (elemRef) { / / ratón está fuera del elemento } </ script>

    Tu página modificará al estilo del elemento cuando el usuario mueva el ratón en y fuera de él. Una función separada se requiere para procesar cada uno de estos eventos de usuario.

  4. 4

    Ubica los elementos dentro de sus funciones de JavaScript y cambia sus atributos en el nombre de clase. Altera las dos funciones de JavaScript de la siguiente manera:

    función overElement (elemRef) { / / mouse está sobre el elemento . document.getElementById (elemRef) className = "más"; } función offElement (elemRef) { / / ratón está fuera del elemento . document.getElementById (elemRef) className = "off"; }

    El código de cada función localiza primero el elemento en cuestión usando su atributo ID, que se ha pasado como parámetro, entonces cambia el nombre de la clase correspondiente.

  5. 5

    Haz el llamado de las funciones dentro del contenido HTML. Su página tiene que "escuchar" la interacción del usuario, llamando a las funciones de JavaScript cuando esto ocurre. Cambia el elemento HTML de la siguiente manera:

    <div class="off" id="intelem" onmouseover="overElement(this.id)" onmouseout="offElement(this.id)"> Hello </ div>

    Esto asigna un atributo ID del elemento, pasándolo a cada función cuando el usuario mueve el ratón dentro o fuera del área. Guarda tus archivos y abre la página HTML en un explorador web, moviendo el ratón dentro y fuera del elemento para probar la funcionalidad.

Consejos y advertencias

  • Puedes incluir todas las propiedades CSS que te gusten para cuando el usuario mueva su ratón dentro y fuera de sus elementos.
  • Las funciones de JavaScript a veces se comportan de forma impredecible en algunos navegadores, por lo que es importante la prueba.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles