-
Cómo identificar la fuente de texto en color con JavaScript
-
Una página web puede utilizar JavaScript para interactuar con los visitantes del sitio, así como descubrir información sobre la página. Por ejemplo, un desarrollador web puede crear una función de JavaScript que recibe las propiedades de ancho de todos los cuadros de texto. El color es otra propiedad importante de la página Web. Su sitio puede contener elementos de texto que contienen una variedad de colores. Si el código necesita descubrir el color de la fuente de texto de un elemento de página en particular, puede utilizar JavaScript para identificar ese valor.Instrucciones
1 Abra el documento HTML usando el Bloc de notas o un editor HTML. Agregue el código siguiente a la sección <body> del documento:
<P id = "el apartado 1" class = "red"> Esto es un párrafo de color rojo </ p>
<Input de tipo "botón" = onclick = "showTextColor ()" value = "Mostrar el color del texto" />
Esto crea un párrafo y un botón. El párrafo se refiere a una clase CSS llamado "rojo". Al hacer clic en el botón, se llamará a la función "showTextColor" que calcula el color del texto del párrafo.
2 Agregue este código a la sección <head> del documento:
<Style type = "text / css">
.red {color: red}
</ Style>
Esto define la clase "rojo". Este párrafo será roja porque la propiedad "color" de esta clase es de color rojo.
3 Añadir el código JavaScript a la sección <head> del documento:
<Script type = "text / javascript">
showTextColor función () {
// Líneas 1-3
el párrafo var = document.getElementById ( "el apartado 1");
textColor var;
// Líneas 4-5
si (paragraph.currentStyle)
textColor = paragraph.currentStyle.color;
// Líneas 6-7
else if (window.getComputedStyle)
textColor = document.defaultView.getComputedStyle (párrafo, null) .getPropertyValue ( "color");
alert ( "El color del texto es" + textColor);
}
</ Script>
una línea para crear una referencia al párrafo y lo almacena en el "apartado". La línea dos define una variable que contendrá el color del texto. Línea de cuatro utiliza la propiedad "currentStyle" para obtener el color del texto si el navegador es compatible con esa propiedad. Línea de seis utiliza el método "document.defaultView.getComputedStyle" para obtener el color del texto si el navegador es compatible con ese método. Diferentes navegadores son compatibles con diferentes métodos.
4 Guarde el archivo y abra Windows Explorer. Busque el archivo y haga doble clic en él para verlo en su navegador.
5 Clic en el botón. La función de JavaScript se ejecutará y mostrará el color del texto en un cuadro de mensaje.
Consejos y advertencias
- Si utiliza Firefox, el cuadro de mensaje que decía: "El color del texto es rgb (255, 0, 0)." Esto se debe a que Firefox muestra el color utilizando el sistema RGB. En RGB, rojo es "255, 0, 0" (ver Recursos).
