“Conocimientos Programación>JavaScript Programación

Cómo agregar estilos con JavaScript

2015/1/26
Porque JavaScript es un lenguaje de script del lado del cliente , que le permite acceder y manipular el código HTML de una página Web después de que se haya cargado en el navegador y se muestra en la pantalla. Por ejemplo , puede añadir estilos a los elementos HTML mediante el etiquetado de un elemento con un "id ", que hace referencia al elemento y añadir el estilo. Puede incluir directamente el estilo o definir una clase y agregar la clase para agregar el estilo . Instrucciones
1

Crear una página HTML con un editor o el Bloc de notas . Definir una clase con un estilo que desea agregar y agregar texto a la página Web que desea aplicar un estilo con JavaScript. ! Por ejemplo , escriba:

< DOCTYPE HTML PUBLIC " - //W3C //DTD XHTML 1.0 Transitional //EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd ">



< p >

agregar estilos < /title> <br> < p . > <style> <br> <p> destacado {background - color: # FFFFCC ;} <br> <p> < /style> <br> <p> < /head> <br> <p> <body> <br> <p> <div id="text1"> Resaltar este texto < /div > <div <br> <p> id="text2"> Resaltar este texto demasiado < /div > ; <br> <p> < /body> <br> <p> < /html> <br> 2 <p> Crear una función de JavaScript y colocarlo entre las etiquetas <head> . Obtener el "id" del primer texto con el estilo y añadir los parámetros de estilo directamente a ella. Por ejemplo , escriba: <br> <p> <script type="text/javascript"> <br> <p> style1 function () { var <br> <p> texto1 = document.getElementById ( " texto1 " ) ; <br> <p> text1.style.backgrouondColor = "# FFFFCC " ; <br> <p> } <br> 3 <p> Crear otra función JavaScript para obtener el " id" de el segundo elemento y agregue una clase CSS para cambiar el estilo . Por ejemplo , escriba: <br> <p> style2 función () { var <br> <p> texto2 = document.getElementById ( " texto2 "); <br> <p> text2.class = " highlight" ; <br> <p> <br> <p> } < /script> <br> 4 <p> Call las dos funciones de JavaScript justo antes de la etiqueta de cierre <body> para dar tiempo a la página HTML para cargar . Por ejemplo , escriba: <br> <p> <script type="text/javascript"> <br> <p> style1 (); <br> <p> style2 (); <br> <p> < ;/script> <br> <br> <div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div> </div> <div class=contentpage> <div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-llamar-a-funciones-de-PHP-con-jQuery-.html' >Cómo llamar a funciones de PHP con jQuery </a> </div> <div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-extraer-los-parámetros-de-una-URL-con-JavaScript-.html' >Cómo extraer los parámetros de una URL con JavaScript </a> </div> </div> <dl class=xgc> <dt><span>JavaScript Programación</span></dt> <dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-de-cadena-a-entero-en-Javascript-.html">Cómo convertir de cadena a entero en Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-girar-una-Div-JavaScript-.html">Cómo girar una Div JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-controles-a-la-API-de-Google-Maps-.html">Cómo agregar controles a la API de Google Maps </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-Banner-Ciclismo-JavaScript-.html">Cómo hacer un Banner Ciclismo JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-color-de-fondo-HTML-Con-un-sistema-en-Javascript-.html">Cómo cambiar el color de fondo HTML Con un sistema en Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Definición-de-JavaScript-.html">Definición de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-que-su-propia-función-en-jQuery-.html">Cómo hacer que su propia función en jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-navegar-de-ventana-modal-jQuery-a-otra-página-.html">Cómo navegar de ventana modal jQuery a otra página </a></dd> </dl> </div> <!--right--> <div class=rightmain> <div class=esrightlist> <div class=e1>Los últimos artículos de equipo</div> <ul> <li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Embellecedores-de-código-para-JavaScript-.html" >Embellecedores de código para JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-el-botón-Publicar-en-Facebook-a-su-sitio-web-.html" >Cómo agregar el botón Publicar en Facebook a su sitio web </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-un-contenedor-de-JavaScript-para-la-API-.html" >Cómo crear un contenedor de JavaScript para la API </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-los-colores-de-fuente-con-Javascript-.html" >Cómo cambiar los colores de fuente con Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Tutorial-Paso-a-Paso-para-UML-Eclipse-.html" >Tutorial Paso a Paso para UML Eclipse </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-quitar-JavaScript-.html" >Cómo quitar JavaScript </a> </li> </ul> </div> <div class=esrightlist> <div class=e1>Artículos de la popular computadora</div> <ul> <li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-Habbo-Retro-.html" >Cómo hacer un Habbo Retro </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-escribir-secuencias-de-comandos-en-RFT-Java-.html" >Cómo escribir secuencias de comandos en RFT Java </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-establecer-el-tamaño-de-una-imagen-en-HTML-.html" >Cómo establecer el tamaño de una imagen en HTML </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ocultar-un-redireccionamiento-.html" >Cómo ocultar un redireccionamiento </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cambiar-el-puntero-del-ratón-en-Javascript-.html" >Cambiar el puntero del ratón en Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-redireccionar-una-página-web-mediante-HTML-.html" >Cómo redireccionar una página web mediante HTML </a></li> </ul> </div> <div class="esrightad"> <script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script> </div> <div class=esrightlist> <div class=e1>Más categorías</div> <ul> <li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li> <li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li> <li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li> </ul> </div> </div> <!--right end--> <div class="cl"></div> </div> <div class=esfoot> <div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div> </div> </body> </html>