DOM Estilo

Desplazarse al índice de navegación

Nota: Los scripts de esta página realizan una comprobación previa, basada en el método hasFeature de la interfaz DOMImplementation, para determinar si deben ejecutarse o no. Es posible que, aun sin ser plenamente compatible con el módulo correspondiente, el navegador sea capaz de interpretar correctamente algún script, por lo que se ofrece la posibilidad de deshabilitar dicho test pulsando el botón dispuesto a continuación. Obviamente, el caso contrario también es posible, y puede ocurrir que un script no funcione aunque haya dado positivo en la prueba.

Métodos y propiedades utilizados en los ejemplos

getElementById (Identificador)
(DOM Núcleo: Método de Document) Devuelve el nodo Elemento cuyo id es Identificador.
createElement (Tipo)
(DOM Núcleo: Método de Document) Crea un nodo tipo Element del tipo especificado en Tipo.
createTextNode (Cadena)
(DOM Núcleo: Método de Document) Crea un nodo tipo Text con el valor Cadena.
appendChild (nuevoNodo)
(DOM Núcleo: Método de Node) Añade el nodo nuevoNodo al final del conjunto de hijos del nodo al que se aplica.
parentNode
(DOM Núcleo: Propiedad de Node) Devuelve el padre del nodo dado.
defaultView
(DOM Vistas: Propiedad de DocumentView) La interfaz por defecto de la que derivan las posibles vistas.
styleSheets
(DOM Hojas de Estilo: Propiedad de DocumentStyle) Devuelve el conjunto de hojas de estilo enlazadas o embebidas en el documento.
cssRules
(DOM CSS: Propiedad de CSSStyleSheet) Devuelve el conjunto de reglas de la hoja de estilo a la que se aplica.
insertRule (Regla, Número)
(DOM CSS: Método de CSSStyleSheet) Inserta una regla con el texto Regla en la posición Número.
deleteRule (Número)
(DOM CSS: Método de CSSStyleSheet) Devuelve el conjunto de reglas de la hoja de estilo a la que se aplica.
getPropertyValue (Nombre)
(DOM CSS: Método de CSSStyleDeclaration) Devuelve el valor de la propiedad especificada por Nombre.
getComputedStyle (Elemento, Pseudoelemento)
(DOM CSS: Método de ViewCSS) Devuelve el estilo computado para el elemento Elemento y, de existir, el Pseudoelemento.
style
(DOM CSS: Propiedad de ElementCSSInlineStyle) Devuelve o agrega un atributo style del elemento al que se aplica.
marginLeft
(DOM CSS2: Propiedad de CSS2Properties) La propiedad margin-left.
letterSpacing
(DOM CSS2: Propiedad de CSS2Properties) La propiedad letter-spacing.
top
(DOM CSS2: Propiedad de CSS2Properties) La propiedad top.

Agregar y eliminar reglas

Sin complicaciones, sin comentarios.

function agregarRegla(elmSPAN) {
  var refHoja = document.styleSheets[1];
  var Regla = 'p { font-size:1.5em; }';
  refHoja.insertRule(Regla, refHoja.cssRules.length);
}
 
function eliminarRegla(elmSPAN) {
  var refHoja = document.styleSheets[1];
  refHoja.deleteRule(refHoja.cssRules.length-1);
}

Estilos computados

Obtención de los valores computados para la representación. Para apreciar diferencias volver a ejecutar tras redimensionar la ventana, aumentar el tamaño de las letras, etc..

function obtenerEstiloComuptado() {
  var elmP = document.getElementById('ParrafoEj');
  var elmUL = document.createElement('ul');
  var elmLI;
  var elmSTRONG;
  var elmText;
  var cnjDecl = document.defaultView.getComputedStyle(elmP,null);
  for (var i=0; i<cnjDecl.length; i++) {
     elmLI = document.createElement('li');
     elmSTRONG = document.createElement('strong');
     elmText = document.createTextNode(cnjDecl.item(i)+': ');
     elmSTRONG.appendChild(elmText);
     elmLI.appendChild(elmSTRONG);
     elmText = document.createTextNode(cnjDecl.getPropertyValue(cnjDecl.item(i)));
     elmLI.appendChild(elmText);
     elmUL.appendChild(elmLI);
     }
  elmP.parentNode.appendChild(elmUL);
}

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas...

Cambiando estilos dinámicamente

La típica técnica histórica del HTML dinámico: cambiar el estilo en línea sobre la marcha. Disculpen las molestias.

var Contador = Math.PI;
var Temporizador;
 
Temporizador = setInterval('animarParrafo()', 25);
 
function animarParrafo() {
  var elmP = document.getElementById('ParrafoEjAni');
  elmP.style.marginLeft = 3*(1+Math.cos(Contador))+'em';
  elmP.style.letterSpacing = (1+Math.cos(Contador))+'em';
  elmP.style.top = 0.25*(Math.sin(2*Contador))+'em';
  Contador+=0.05;
}

Texto

Estás en: tierra de nómadas > tallerWeb > Introducción al DOM > DOM Estilo

Volver a: Introducción al DOM (DOM Estilo).