Tecnología

Inicio

Cómo comprobar atributos CSS con JavaScript

August 10

Hojas de estilo en cascada (CSS) se introdujeron en la especificación HTML para facilitar el código más eficiente y fácil de leer, y variable para controlar la apariencia de las páginas Web. El poder combinado de CSS, el Document Object Model (DOM), y JavaScript hace que la tarea de analizar a través de una gran página web con muchos elementos monumentalmente más fácil y menos propenso a errores. Puede comprobar los atributos CSS ( "propiedades de estilo") de un elemento en una página Web utilizando un método JavaScript para hacer referencia al elemento en el DOM e invocando el método "getComputedStyle". También puede utilizar el objeto "hojas de estilo" para analizar la hoja de estilo de una página web (s) y comprobar las propiedades de estilo establecidas allí.

Instrucciones

Navegación por el árbol DOM

1 Utilice el método "getElemenById" del objeto "documento" para acceder rápidamente a un elemento específico en el árbol DOM de la página. Un ID particular sólo puede ser asignado a un solo elemento. Asignar el ID de etiqueta HTML del elemento con el atributo "id":

<P id = "specialP"> párrafo de texto </ p>

Esta es la manera de hacer referencia a este elemento por ID en Javascript:

document.getElementById ( "specialP")

El método devuelve una referencia al elemento de párrafo especificado. Más tarde, vamos a utilizar esta referencia para comprobar las propiedades de CSS del elemento.

2 Utilice el método "getElementsByTagName" del objeto "documento" para recuperar una matriz de todos los elementos en el árbol DOM con un nombre de etiqueta en particular (ver Referencias 1). Aquí hay un ejemplo:

document.getElementsByTagName ( "p")

Las matrices en JavaScript se numeran desde 0. Para especificar el primer párrafo en el documento, utilice corchetes como esto:

document.getElementsByTagName ( "p") [0]

3 Utilice la opción "parentNode", "childNodes", "firstChild", "lastChild", "nextSibling," y "métodos previousSibling" para recorrer el árbol DOM en relación con su posición actual en el mismo. Etiquetas anidadas dentro de otras etiquetas son niños, y las etiquetas de anidación son los padres. Mantener esta relación metáfora de la familia en mente. Aquí hay un ejemplo que hace referencia a la etiqueta dentro del cuerpo (u otro elemento de anidación) que se encuentra inmediatamente después del párrafo con ID "specialP:"

document.getElementById ( "specialP"). nextSibling

El método "childNodes", así como "getElementsByTagName," devuelve una matriz, a fin de utilizar la misma sintaxis para especificar qué elemento hijo desea examinar:

document.getElementsByTagName ( "UL") [0] .childNodes [2]

Esto hace referencia el tercer elemento de la primera lista desordenada en la página.

Recuperando propiedades de estilo

4 Utilice el método "window.getComputedStyle" para comprobar las propiedades de estilo de un elemento HTML que ha referenciado en el árbol DOM:

var ref = document.getElementById ( "specialP");

var = checkedStyle window.getComputedStyle (ref) .fontSize;

La propiedad "fontSize" es una de las muchas propiedades de estilo que pueden ser asignados a un elemento HTML. Consulte la página "DOM HTML Estilo de objetos" en w3schools.com de una lista organizada de propiedades que se pueden comprobar. Tenga en cuenta que en JavaScript, propiedades de estilo se escriben en el caso de camellos ( "fontSize"), en oposición a la forma con guión utilizado en código CSS ( "font-size").

5 Leer el contenido de las hojas de estilo del documento a sí mismos para ver qué propiedades se han asignado. El siguiente código hace referencia a la primera serie de propiedades definidas en la primera hoja de estilos del documento:

document.styleSheets [0] .cssRules [0] .style.cssText

6 Buscar a través de las hojas de estilo del documento usando los bucles para encontrar las propiedades de estilo definidas para una etiqueta específica u otro selector CSS. El código siguiente busca todas las propiedades de estilo definidas mediante el selector CSS "p", y los informes de cada uno en un cuadro de diálogo.

for (var j = 0; j <document.styleSheets.length; j ++) {

for (var i = 0; i <document.styleSheets [j] .cssRules.length; i ++) {

if(document.styleSheets[j].cssRules[i].selectorText=="p"){

alert ( "número de estilos:" + j + "\ n" + "Regla número:" + i + "\ n" + "Propiedades:" + document.styleSheets [J] .cssRules [i] .style.cssText);

}

}

}

Esta es una herramienta de depuración útil para una página que utiliza muchas hojas de estilo diferentes.

Consejos y advertencias

  • Coloque la siguiente etiqueta en la parte superior del documento HTML (antes de la primera etiqueta "HTML") para garantizar un comportamiento adecuado de "getComputedStyle" y los objetos de hoja de estilo en Internet Explorer 9: <! DOCTYPE HTML PUBLIC "- // W3C / / DTD HTML 4.01 // EN "" http://www.w3.org/TR/html4/strict.dtd ">
  • Al navegar por el árbol DOM con el "parentNode", "childNodes", "firstChild", "lastChild", "nextSibling," y Métodos "previousSibling", tenga en cuenta que los navegadores Web interpretan espacio en blanco en el código HTML como nodos DOM. Desarrollador David Baron cubre este tema así en un artículo titulado "El espacio en blanco en el DOM" en mozilla.org.