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=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programacion/javascript-programming/91003.html' >Cómo llamar a funciones de PHP con jQuery </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/91005.html' >Cómo extraer los parámetros de una URL con JavaScript </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Artículos relacionados </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90924.html" title="Definición de variable existe en JavaScript " target="_self">Definición de variable existe en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90849.html" title="Cómo mantener el Prototype JS Hasta Fecha " target="_self">Cómo mantener el Prototype JS Hasta Fecha </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90811.html" title="Cómo dibujar curvas con Javascript " target="_self">Cómo dibujar curvas con Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91115.html" title="Cómo hacer esquinas curvas Javascript para IE " target="_self">Cómo hacer esquinas curvas Javascript para IE </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90912.html" title="Cómo comprobar si DIV Got Focus en Javascript " target="_self">Cómo comprobar si DIV Got Focus en Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91190.html" title="Javascript Tutorial Scrollbar " target="_self">Javascript Tutorial Scrollbar </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90776.html" title="¿Por qué mi Javascript Mostrar Void " target="_self">¿Por qué mi Javascript Mostrar Void </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91233.html" title="Cómo hacer una celda de tabla con enlace " target="_self">Cómo hacer una celda de tabla con enlace </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91065.html" title="Cómo validar una cadena de fecha en jQuery " target="_self">Cómo validar una cadena de fecha en jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90779.html" title="Cómo crear una animación 3D Logo en Javascript " target="_self">Cómo crear una animación 3D Logo en Javascript </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artículos destacados </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90046.html" title="Cómo insertar registros en las aplicaciones Java " target="_self">Cómo insertar registros en las aplicaciones Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91375.html" title="Cómo conectar el PHP MySQL App Con el Flex App " target="_self">Cómo conectar el PHP MySQL App Con el Flex App </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89051.html" title="¿Cómo paso a través de una aplicación Grails Con NetBeans " target="_self">¿Cómo paso a través de una aplicación Grails Con Ne…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/94080.html" title="Cómo utilizar variables locales en guiones Python " target="_self">Cómo utilizar variables locales en guiones Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96175.html" title="Tutorial sobre el procedimiento Sub función en Visual Basic 2008 " target="_self">Tutorial sobre el procedimiento Sub función en Visual …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91584.html" title="Cómo hacer un menú dinámico a través de PHP y MySQL " target="_self">Cómo hacer un menú dinámico a través de PHP y MySQL…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86493.html" title="¿Qué es Csc.exe Desde la Microsoft Corporation " target="_self">¿Qué es Csc.exe Desde la Microsoft Corporation </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89139.html" title="Cómo integrar Java en Flash " target="_self">Cómo integrar Java en Flash </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92090.html" title="Cómo importar de SQL en MySQL " target="_self">Cómo importar de SQL en MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90842.html" title="JavaScript: redirección a la página " target="_self">JavaScript: redirección a la página </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
