CSSStyleSheet

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

* Some parts of this feature may have varying levels of support.

La interfaz CSSStyleSheet representa una sola hoja de estilo CSS, y le permite inspeccionar y modificar la lista de reglas contenidas en la hoja de estilo. Hereda propiedades y métodos de su padre, StyleSheet.

Una hoja de estilo consta de una colección de objetos CSSRule que representan cada una de las reglas de la hoja de estilo. Las reglas están contenidas en un CSSRuleList, que se puede obtener de la propiedad cssRules de la hoja de estilo.

Por ejemplo, una regla podría ser un objeto CSSStyleRule que contenga un estilo como:

css

h1,
h2 {
  font-size: 16pt;
}

Otra regla podría ser una regla de arroba como @import o @media, y así sucesivamente.

Consulte la sección Obtención de una hoja de estilo para conocer las diversas formas en que se puede obtener un objeto CSSStyleSheet. Un objeto CSSStyleSheet también se puede construir directamente. El constructor y los métodos CSSStyleSheet.replace() y CSSStyleSheet.replaceSync() son adiciones más recientes a la especificación, que permiten hojas de estilo construibles.

Constructor

CSSStyleSheet(): Crea un nuevo objeto CSSStyleSheet.

Propiedades de instancia

Hereda las propiedades de su padre, StyleSheet.

CSSStyleSheet.cssRules Read only: Devuelve un CSSRuleList activo que mantiene una lista actualizada de los objetos CSSRuleList que componen la hoja de estilo.

Nota: En algunos navegadores, si se carga una hoja de estilo desde un dominio diferente, acceder a cssRules genera un SecurityError.
CSSStyleSheet.ownerRule Read only: Si esta hoja de estilo se importa al documento mediante una regla @import, la propiedad ownerRule devuelve la correspondiente CSSImportRule; de lo contrario, el valor de esta propiedad es null.

Métodos de instancia

Hereda métodos de su padre, StyleSheet.

CSSStyleSheet.deleteRule(): Elimina la regla en el índice especificado en la lista de reglas de la hoja de estilo.
CSSStyleSheet.insertRule(): Inserta una nueva regla en la posición especificada en la hoja de estilo, dada la representación textual de la regla.
CSSStyleSheet.replace(): Reemplaza de forma asíncrona el contenido de la hoja de estilo y devuelve un Promise que se resuelve con la CSSStyleSheet actualizada.
CSSStyleSheet.replaceSync(): Reemplaza sincrónicamente el contenido de la hoja de estilo.

Propiedades heredadas

Estas propiedades son propiedades heredadas introducidas por Microsoft; estos se mantienen para la compatibilidad con los sitios existentes.

rules Read only Obsoleto: La propiedad rules es funcionalmente idéntica a la propiedad estándar cssRules; devuelve un CSSRuleList en vivo que mantiene una lista actualizada de todas las reglas en la hoja de estilo.

Métodos heredados

Estos métodos son métodos heredados introducidos por Microsoft; estos se mantienen para la compatibilidad con los sitios existentes.

addRule() Obsoleto

Agrega una nueva regla a la hoja de estilo dado el selector al que se aplica el estilo y el bloque de estilo para aplicar a los elementos coincidentes.

Esto difiere de insertRule(), que toma la representación textual de la regla completa como una sola cadena.

removeRule() Obsoleto

Funcionalmente idéntico a deleteRule(); elimina la regla en el índice especificado de la lista de reglas de la hoja de estilo.

Obtención de una hoja de estilo

Una hoja de estilo está asociada como máximo con un Document, al que se aplica (a menos que este desactivada). Se puede obtener una lista de objetos CSSStyleSheet para un documento dado usando la propiedad Document.styleSheets. También se puede acceder a una hoja de estilo específica desde su objeto propietario (Node o CSSImportRule), si lo hay.

Un objeto CSSStyleSheet se crea y se inserta en la lista Document.styleSheets del documento automáticamente por el navegador, cuando se carga una hoja de estilo para un documento.

A continuación se muestra una lista (posiblemente incompleta) de las formas en que una hoja de estilo se puede asociar con un documento:

Motivo por el cual la hoja de estilo se asocia con el documento	Aparece en la lista `document. styleSheets`	Obtener el elemento/regla propietario dado el objeto de hoja de estilo	La interfaz para el objeto propietario.	Obtención del objeto CSSStyleSheet del propietario
Elementos `<style>` y `<link>` en el documento	Sí	`.ownerNode`	`HTMLLinkElement`, `HTMLStyleElement`, o `SVGStyleElement`	`HTMLLinkElement.sheet`, `HTMLStyleElement.sheet`, o `SVGStyleElement.sheet`
Regla CSS `@import` en otras hojas de estilo aplicadas al documento	Sí	`.ownerRule`	`CSSImportRule`	`.styleSheet`
Instrucción `<?xml-stylesheet ?>` de procesamiento en el documento (no HTML)	Sí	`.ownerNode`	`ProcessingInstruction`	`.sheet`
Cabecera de enlace HTTP	Sí	N/A	N/A	N/A
Hojas de estilo del navegador (predeterminado)	No	N/A	N/A	N/A

Especificaciones

Specification
CSS Object Model (CSSOM) # the-cssstylesheet-interface