Posts etiquetados ‘diseño web’

Obtener el estilo CSS de un elemento HTML

Sábado, 15 Diciembre, 2007

elem.style devuelve el estilo inline, id est, el que se incluye como atributo dentro de la etiqueta HTML correspondiente, y por tanto no permite obtener el estilo definido en una hoja de estilos CSS. Para esto hay que usar el método
var estilo= window.getComputedStyle(elem, null)


Así, por ejemplo, para obtener el ancho del elemento:

  • elem.style.width devolverá el ancho si se definió de forma inline o la cadena vacía si no se hizo así
  • estilo.width devolverá el ancho de elem especificado en una hoja de estilo

Hay que tener en cuenta que el método getComputedStyle es ineficiente (pues recorre toda la jerarquía CSS y crea un documento que puede ser bastante grande). También es importante tener en cuenta que el objeto devuelto por getComputedStyle es de sólo lectura y modificar sus atributos no modificará ni el elemento original ni el documento CSS correspondiente.

En IE se puede tener la misma funcionalidad a través de la propiedad no estándar currentStyle de cada objeto HTMLElement.

Anotaciones sobre CSS

Sábado, 15 Diciembre, 2007

No todos los navegadores respetan el atributo z-index cuando se aplica a elementos <iframe> y <select>.

Es más, los navegadores de cuarta generación pueden llegar a mostrar todos los elementos de un formulario por encima de todos los demás.

El ancho/alto de un elemento se refiere al contenido disponible, por tanto se ignora el borde y el padding. Por ejemplo, un div con un borde de un píxel, un padding de 5 y un ancho de 30 medirá en total 36 píxel de ancho. Los navegadores IE desde el 4 hasta el 5.5 (pero no el 5 para Mac), sin embargo, calculan mal estas dimensiones y sí incluyen el borde y el padding en el cómputo total.

IE 6 tiene dos modos de funcionamiento: estándar, que calcula bien las dimensiones, y compatibilidad, que lo hace como las versiones previas. La forma de activar un modo u otro es mediante el document-type del documento html:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>