Scribd Logo
Importer

Bienvenue sur Scribd !

  • GetElementsByTagName JavaScript. Cambiar Estilos CSS de Nodos Con Style

    Transféré par

    Abel Rodríguez
    201 vues4 pages
    Este documento explica cómo usar getElementsByTagName en JavaScript para obtener nodos del DOM y cómo cambiar los estilos CSS de esos nodos usando la propiedad style. Proporciona un ejemplo de código que obtiene los nodos <label> de un formulario y les asigna diferentes colores de fondo al hacer clic.

    Description originale:

    GetElementsByTagName JavaScript. Cambiar Estilos CSS de Nodos Con Style

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Este documento explica cómo usar getElementsByTagName en JavaScript para obtener nodos del DOM y cómo cambiar los estilos CSS de esos nodos usando la propiedad style. Proporciona un ejemplo de código que obtiene los nodos <label> de un formulario y les asigna diferentes colores de fondo al hacer clic.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    201 vues4 pages

    GetElementsByTagName JavaScript. Cambiar Estilos CSS de Nodos Con Style

    Transféré par

    Abel Rodríguez
    Este documento explica cómo usar getElementsByTagName en JavaScript para obtener nodos del DOM y cómo cambiar los estilos CSS de esos nodos usando la propiedad style. Proporciona un ejemplo de código que obtiene los nodos <label> de un formulario y les asigna diferentes colores de fondo al hacer clic.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    getElementsByTagName JavaScript.

    Cambiar estilos CSS de nodos


    con style. Ejemplo y ejercicio (CU01128E)
    Escrito por Csar Krall

    Resumen:Entrega n28:Orientacin sobre el curso"Tutorial bsico del programador web: JavaScript desde cero".
    Codificacin aprenderaprogramar.com:CU01128E

    GETELEMENTSBYTAGNAME
    El acceso a un nodo concreto del DOM usando getElementById es muy frecuente, pero hay otras
    maneras de acceder a los nodos del DOM. Una de ellas es usando
    getElementsByTagName('etiquetaBuscada'). Esta funcin nos devuelve un array conteniendo todos
    los nodos DOM cuya etiqueta coincide con etiquetaBuscada.

    El orden en que aparecern los elementos en el array (comenzando con ndice cero) es el mismo en el
    que aparezcan en el cdigo de la pgina web. Ejemplo:

    var elementosDiv =
    document.getElementsByTagName('div');

    Nos devolverun array con todos los nodosde tipo element cuya etiqueta sea div, empezando con
    ndice cero: elementosDiv[0], elementosDiv[1], elementosDiv[2], elementos div[3] hasta el ndice
    que sea necesario para abarcar tantos elementos div como haya en el cdigo. Podemos obtener los
    nodos de cualquier tipo de etiqueta: div, span, p, label, input, h1, h2, etc.

    Tener en cuenta que escribimos document.getElementsByTagName('div') porque queremos empezar


    la bsqueda desde el nodo raz del DOM, es decir, el nodo document (as exploramos todos los
    nodos). Podramos empezar la bsqueda por otro nodo si resultara de inters.

    CAMBIAR ESTILOS CSS CON JAVASCRIPT


    Una posibilidad interesante de JavaScript ser poder modificar de forma dinmica el aspecto de la
    web modificando el CSS asociado. La sintaxis para poder ejecutar modificaciones de estilo ser la
    siguiente:

    nodoDelDomAlQueAccedemos.style.nombrePropiedad =
    'valorPropiedad';

    Un ejemplo sera: elementosObtenidos[1].style.backgroundColor = '#FF9933';


    Donde elementosObtenidos[1] corresponde a un nodo del DOM. Y backgroundColor es la propiedad
    CSS que deseamos cambiar pero expresada con sintaxis JavaScript. Si te fijas, la sintaxis CSS es
    background-color mientras que la sintaxis JavaScript es backgroundColor. En este caso son similares,
    pero no exactamente iguales. En otros casos s hay coincidencia. Ms adelante veremos una tabla de
    equivalencia entre propiedades CSS
    Para ver la aplicacin del acceso con getElementsByTagName y el cambio de propiedades CSS con
    JavaScript escribe el siguiente cdigo y comprueba sus efectos al visualizar la pgina:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Ejemplo DOM - aprenderaprogramar.com</title>
    <meta charset="utf-8">
    <style type="text/css">
    body {background-color:white; font-family: sans-serif;}
    label {color: maroon; display:block; padding:5px;}

    </style>
    <script type="text/javascript">
    function cambiarAspecto(elemento) {
    var elementosObtenidos = document.getElementsByTagName(elemento);
    elementosObtenidos[0].style.backgroundColor = '#FF6633';
    elementosObtenidos[1].style.backgroundColor = '#FF9933';
    elementosObtenidos[2].style.backgroundColor = '#FFCC33';
    }
    </script>
    </head>
    <body>
    <div id="cabecera">
    <h1>Portal web aprenderaprogramar.com</h1>
    <h2>Didctica y divulgacin de la programacin</h2>
    </div>
    <!-- Formulario de contacto -->
    <div style="width:450px;">
    <form name ="formularioContacto" class="formularioTipo1" method="get"
    action="accion.html" onclick="cambiarAspecto('label')">
    <p>Si quieres contactar con nosotros envanos este formulario relleno:</p>
    <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text"
    name="nombre" /></label>
    <label for="apellidos"><span>Apellidos:</span> <input id="apellidos"
    type="text" name="apellidos" /></label>
    <label for="email"><span>Correo electrnico:</span> <input id="email"
    type="text" name="email" /></label>
    <label>
    <input type="submit" value="Enviar">
    <input type="reset" value="Cancelar">
    </label>
    </form>
    </div>
    </body>
    </html>

    El resultado esperado es que al cargar la pgina los elementos label del form se muestren con un color de fondo
    blanco. Al hacer click para escribir en el formulario, se mostrar cada uno de los elementos con un color de fondo
    ligeramente distinto porque as lo hemos establecido a travs del cdigo.

    Vous aimerez peut-être aussi