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.
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:
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 objetosCSSRuleList
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 unSecurityError
. CSSStyleSheet.ownerRule
Read only-
Si esta hoja de estilo se importa al documento mediante una regla
@import
, la propiedadownerRule
devuelve la correspondienteCSSImportRule
; de lo contrario, el valor de esta propiedad esnull
.
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 laCSSStyleSheet
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ándarcssRules
; devuelve unCSSRuleList
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.
|
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 |
Compatibilidad con navegadores
BCD tables only load in the browser