DOM: styles, ranges
DOM styles, ranges.
- styles: style object es una instancia de CSSStyleDeclaration y contiene la información de estilos especificada en el HTML style atributte pero no hay información sobre los estilos que han caído en cascada desde las hojas de estilo incluidas o en línea. Todas las CSS property especificadas en style attribute están representadas como propiedades de style object.
- let myDiv = document.getElementById("myDiv");
- myDiv.style.backgroundcolor = "red"; // set the background color
- myDiv.style.border = "1px solid black";
- Los estilos especificados en style attribute pueden también recuperarse usando style object
- <div id"myDiv" style="background-color: blue; width:10px">...</div>
- alert( myDiv.style.backgroundcolor ); // "blue"
- alert( myDiv.style.width ); // "10px"
- DOM Style Properties and MethodscssText:
- cssText: Permite acceder al CSS code de style attribute
- myDiv.style.cssText = "width:25px; height: 100px; background-color:green";
- alert(myDiv.style.cssText);
- length: número de de CSS properties aplicadas al elemento
- parentRule: Representa información CSS
- getPropertyCSSValue(propertyName): devuelve un objeto CSSValue que contiene propertyName.
- getPropertyValue(propertyName): devuelve el string value de propertyName
- alert( myDiv.style.getPropertyCSSValue("background-color").cssText == myDiv.style.getPropertyValue("background-color") ); // true
- getPropertyPriority(propertyName): devuelve "important" si propertyName usa "important"
- item(index): devuelve el nombre de la propiedad CSS de la posición index
- alert( myDiv.style.item(2)); // "background-color"
- alert ( myDiv.style[2] == myDiv.style.item(2) ); // true
- removeProperty(propertyName): Elimina propertyName del objeto style
- setProperty(propertyName, value, important): graba propertyName con el valor de value)
- nota:
- el método getPropertyValue() siempre recupera el string representado de CSSValue.
- Si se necesita más información, getPropertyCSSValue() devuelve el objeto CSSValue que contiene dos propiedades.
- cssText: es la misma que el valor devuelto de getPropertyValue()
- cssValueType: es una constante numérica que contiene el tipo.
- 0: valor heredado
- 1: valor primitivo
- 2: lista
- 3: valor personalizado (custom value)
- Ejemplo:
- Computed Styles:
- El objeto style tiene información sobre atributos estilos del elemento, pero no de los estilos en cascada de las hojas de estilo que afectan al elemento.
- document.defaultView provee un método llamado getComputedStyle().
- getComputedStyle(): Acepta dos parámetros:
- el elemento o pseudo-elemento para obtener la información
- null si no se requiere información de pseudo elementos del elemento, caso contrario indicar el pseudo elemento (":after, etc...")
- Devuelve un CSSStyleDeclaration object (del mismo tipo que style property ) que contiene todos los estilos aplicados al elemento incluyendo las hojas de estilo y cálculos previos .
- Ejemplo:
- Working with Style Sheets
- El CSSStyleSheet type representa una hoja de estilo CSS incluida en una <link> element o definida en una <style> element.
- Tener en cuenta que los elementos mismos están representados por los tipos HTMLLinkElement y HTMLStyleElement respectivamente.
- El tipo CSSStyleSheet es lo suficiente genérico como para representar una hoja de estilo sin importar cómo se defina en el HTML. Además, los tipos específicos de elementos permiten la modificación de atributos HTML, mientras que un objeto CSSStyleSheet es, con la excepción de una propiedad, una interfaz de solo lectura.
- El tipo CSSStyleSheet hereda de StyleSheet, que se puede usar como base para definir hojas de estilo que no sean CSS.
- Las siguientes propiedades de CSSStyleSheet son heredadas de StyleSheet.
- disabled: Un valor booleano que indica si el estilo de la hoja está deshabilitado.
- href: Es la URL de la hoja de estilo si está incluida en una etiqueta <link>
- media: Colección de media types soportados por la hoja de estilo.
- ownerNode: Puntero al nodo que pertenece la hoja de estilo. Esta propiedad es null si la hoja de estilo usa @import.
- parentStyleSheet: cuando se incluye una hoja de estilo a través de @import, éste es un puntero a la hoja de estilo que la importó
- title: el valor de atributo title en el ownerNode.
- type: un string que indica el tipo de la hoja de estilo. Para CSS style sheets es "text/css".
- Propiedades de CSSStyleSheet:
- cssRules: Una colección de reglas contenidas en la hoja de estilo.
- ownerRules: Si la hoja de estilo fue incluída en un @import es un puntero a la regla que representa el import, sino es null.
- deleteRule(index): Elimina la regla en la ubicación dada en la regla.
- insertRule( rule, index): inserta el string rule especificado en la posición especificada en la colección cssRule.
- La lista de hojas de estilo disponibles en documento está representada por la colección document.styleSheets.
- El número de hojas de estilo en el documento se puede recuperar usando la propiedad length y se puede acceder a cada hoja de estilo utilizando el método item() o la bracket notation.
- CSS rules:
- let myDiv = document.getElementById("myDiv");
- myDiv.style.backgroundcolor = "red"; // set the background color
- myDiv.style.border = "1px solid black";
- Los estilos especificados en style attribute pueden también recuperarse usando style object
- <div id"myDiv" style="background-color: blue; width:10px">...</div>
- alert( myDiv.style.backgroundcolor ); // "blue"
- alert( myDiv.style.width ); // "10px"
- cssText: Permite acceder al CSS code de style attribute
- myDiv.style.cssText = "width:25px; height: 100px; background-color:green";
- alert(myDiv.style.cssText);
- length: número de de CSS properties aplicadas al elemento
- parentRule: Representa información CSS
- getPropertyCSSValue(propertyName): devuelve un objeto CSSValue que contiene propertyName.
- getPropertyValue(propertyName): devuelve el string value de propertyName
- alert( myDiv.style.getPropertyCSSValue("background-color").cssText == myDiv.style.getPropertyValue("background-color") ); // true
- getPropertyPriority(propertyName): devuelve "important" si propertyName usa "important"
- item(index): devuelve el nombre de la propiedad CSS de la posición index
- alert( myDiv.style.item(2)); // "background-color"
- alert ( myDiv.style[2] == myDiv.style.item(2) ); // true
- removeProperty(propertyName): Elimina propertyName del objeto style
- setProperty(propertyName, value, important): graba propertyName con el valor de value)
- nota:
- el método getPropertyValue() siempre recupera el string representado de CSSValue.
- Si se necesita más información, getPropertyCSSValue() devuelve el objeto CSSValue que contiene dos propiedades.
- cssText: es la misma que el valor devuelto de getPropertyValue()
- cssValueType: es una constante numérica que contiene el tipo.
- 0: valor heredado
- 1: valor primitivo
- 2: lista
- 3: valor personalizado (custom value)
- Ejemplo:
- El objeto style tiene información sobre atributos estilos del elemento, pero no de los estilos en cascada de las hojas de estilo que afectan al elemento.
- document.defaultView provee un método llamado getComputedStyle().
- getComputedStyle(): Acepta dos parámetros:
- el elemento o pseudo-elemento para obtener la información
- null si no se requiere información de pseudo elementos del elemento, caso contrario indicar el pseudo elemento (":after, etc...")
- Devuelve un CSSStyleDeclaration object (del mismo tipo que style property ) que contiene todos los estilos aplicados al elemento incluyendo las hojas de estilo y cálculos previos .
- Ejemplo:
- El CSSStyleSheet type representa una hoja de estilo CSS incluida en una <link> element o definida en una <style> element.
- Tener en cuenta que los elementos mismos están representados por los tipos HTMLLinkElement y HTMLStyleElement respectivamente.
- El tipo CSSStyleSheet es lo suficiente genérico como para representar una hoja de estilo sin importar cómo se defina en el HTML. Además, los tipos específicos de elementos permiten la modificación de atributos HTML, mientras que un objeto CSSStyleSheet es, con la excepción de una propiedad, una interfaz de solo lectura.
- El tipo CSSStyleSheet hereda de StyleSheet, que se puede usar como base para definir hojas de estilo que no sean CSS.
- Las siguientes propiedades de CSSStyleSheet son heredadas de StyleSheet.
- disabled: Un valor booleano que indica si el estilo de la hoja está deshabilitado.
- href: Es la URL de la hoja de estilo si está incluida en una etiqueta <link>
- media: Colección de media types soportados por la hoja de estilo.
- ownerNode: Puntero al nodo que pertenece la hoja de estilo. Esta propiedad es null si la hoja de estilo usa @import.
- parentStyleSheet: cuando se incluye una hoja de estilo a través de @import, éste es un puntero a la hoja de estilo que la importó
- title: el valor de atributo title en el ownerNode.
- type: un string que indica el tipo de la hoja de estilo. Para CSS style sheets es "text/css".
- Propiedades de CSSStyleSheet:
- cssRules: Una colección de reglas contenidas en la hoja de estilo.
- ownerRules: Si la hoja de estilo fue incluída en un @import es un puntero a la regla que representa el import, sino es null.
- deleteRule(index): Elimina la regla en la ubicación dada en la regla.
- insertRule( rule, index): inserta el string rule especificado en la posición especificada en la colección cssRule.
- La lista de hojas de estilo disponibles en documento está representada por la colección document.styleSheets.
- El número de hojas de estilo en el documento se puede recuperar usando la propiedad length y se puede acceder a cada hoja de estilo utilizando el método item() o la bracket notation.
