“Conocimientos Programación>JavaScript Programación

Cómo resaltar una columna en JavaScript

2014/9/28
Es posible, usando JavaScript y hojas de estilo en cascada (CSS ) , para cambiar el color de una columna utilizando el mouseOver ( ), y mouseOut (); funciones para abordar el objeto de columna en el Document Object Model (DOM ) . CSS se utiliza para colocar los objetos de texto con precisión dentro del área de visualización de la página . Se ha sustituido el elemento HTML en la mayoría de los casos. El ejemplo de código incluye aquí lo ilustra y se extenderá en la mayoría de los navegadores modernos . Instrucciones
1

Declarar la página principal :



prueba Java < /title> ; <br> <p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <br> 2 <p> Declarar estilos de página : <br> <p> <style type="text/css"> <br> <p> # test <br> <p> <br> <p> { position: absolute ; <br> <p> z - índice: 1 ; <br> visibilidad <p> : visible; <br> ancho <p> : 14.55em ; <br> altura <p> : 8.0em ; <br> <p> top: 0.8em ; <br> <p> izquierda : 0.5.0em ; <br> <p> border: 1px solid # ccc ; <br> <p> - moz- border-radius : 0.5em ; <br> <p> - webkit- border-radius : 0.5em ; <br> <p> float : left; <br> margen <p> : 0 ; <br> <p> text-align : left; <br> <p> relleno : 1 em ; <br> < p> background : # FFFFFF ; <br> <p> } <br> <p> p <br> <p> <br> <p> { font- size: 0.9em ; <br> <p> font-weight : 400 ; <br> <p> color: # FFFFFF ; <br> <p> <br> <p> } < /style> <br> 3 <p> Declarar script: <br> <p> <script type="text/javascript"> <br> <p> mouseOver function () { <br> <p> <br> <p> document.getElementById ( "prueba ") . estilo. background = "# 345678 " <br> <p> } <br> <p> mouseOut function () { <br> <p> <br> <p> document.getElementById ( "prueba ") . style.background = " # FFFFFF " <br> <p> <br> <p> } < /script > <br> <p> < /head> <br> 4 <p> cuerpo declaran: <br> < p > <body> <br> <p> <div id="test" onmouseover="mouseOver()" onmouseout="mouseOut()"> <br> <p> <br> < p > ¡Hola! Tú me has encontrado . <br> <p> < /P > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html> <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-hacer-Blink-Texto-con-JavaScript-.html' >Cómo hacer Blink Texto con JavaScript </a> </div> <div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-de-mesa-colores-de-fondo-con-Javascript-.html' >Cómo cambiar de mesa colores de fondo 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-hacer-de-desplazamiento-acumulado-Offset-en-jQuery-.html">¿Cómo hacer de desplazamiento acumulado Offset en jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-calcular-los-totales-formulario-de-pedido-en-JavaScript-.html">Cómo calcular los totales formulario de pedido en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Los-riesgos-con-JavaScript-.html">Los riesgos con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Como-en-el-tiempo-de-espera-de-JavaScript-.html">Como en el tiempo de espera de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-enviar-una-función-JavaScript-en-un-hipervínculo-.html">Cómo enviar una función JavaScript en un hipervínculo </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Struts-ocultos-en-JavaScript-.html">Struts ocultos en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ejecutar-una-secuencia-de-comandos-Java-externo-Cuando-un-HTML-Web-Cargas-página-.html">Cómo ejecutar una secuencia de comandos Java externo Cuando un HTML Web Cargas página </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> </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/Cómo-se-desvanecen-al-salir-de-una-página-en-JQuery-.html" >Cómo se desvanecen al salir de una página en JQuery </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Javascript-con-Ole-Automation-.html" >Cómo utilizar Javascript con Ole Automation </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-programa-para-convertir-Celsius-a-Kelvin-.html" >Cómo hacer un programa para convertir Celsius a Kelvin </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Java-script-Solución-de-problemas-.html" >Java script Solución de problemas </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-importar-VMWare-disco-en-VirtualBox-.html" >Cómo importar VMWare disco en VirtualBox </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-PDF-con-Javascript-.html" >Cómo crear PDF con 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-calcular-en-Java-Script-.html" >Cómo calcular en Java Script </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cálculos-JavaScript-con-decimales-.html" >Cálculos JavaScript con decimales </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-conseguir-una-página-Web-remoto-con-JavaScript-.html" >Cómo conseguir una página Web remoto con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-el-valor-de-cuadro-combinado-con-JavaScript-.html" >Cómo obtener el valor de cuadro combinado con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-una-búsqueda-de-imágenes-en-una-página-web-.html" >Cómo crear una búsqueda de imágenes en una página web </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-detectar-un-navegador-Safari-en-JavaScript-.html" >Cómo detectar un navegador Safari en JavaScript </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>