Objeto Style de HTML DOM

Objeto Style

El objeto Style representa una declaración de estilo individual.

Atributo del objeto Style

Atributo Descripción
alignContent Establecer o devolver el modo de alineación entre las filas dentro del contenedor flexible, cuando los elementos no utilizan todo el espacio disponible.
alignItems Establecer o devolver el modo de alineación de los elementos dentro del contenedor flexible.
alignSelf Establecer o devolver el modo de alineación de los elementos seleccionados dentro del contenedor flexible.
animation Atributo abreviado de todas las propiedades de animación, excepto animationPlayState.
animationDelay Establecer o devolver cuándo comienza la animación.
animationDirection Establecer o devolver si la animación debe reproducirse en sentido inverso en un ciclo alternativo.
animationDuration Establecer o devolver los segundos o milisegundos necesarios para completar un ciclo de la animación.
animationFillMode Establecer o devolver el valor aplicado fuera del tiempo de ejecución de la animación.
animationIterationCount Establecer o devolver el número de veces que debe reproducirse la animación.
animationName Establecer o devolver el nombre de la animación @keyframes.
animationPlayState Establecer o devolver si la animación está en ejecución o en pausa.
animationTimingFunction Establecer o devolver la curva de velocidad de la animación.
background Establecer o devolver todas las propiedades de fondo en una declaración.
backgroundAttachment Establecer o devolver si la imagen de fondo es fija o se desplaza con la página.
backgroundClip Establecer o devolver la región de dibujo del fondo.
backgroundColor Establecer o devolver el color de fondo del elemento.
backgroundImage Establecer o devolver la imagen de fondo del elemento.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition Establecer o devolver la región de ubicación de la imagen de fondo.
backgroundPosition Establecer o devolver la posición de inicio de la imagen de fondo.
backgroundRepeat Establecer o devolver cómo se repite (tilea) la imagen de fondo.
backgroundSize Establecer o devolver el tamaño de la imagen de fondo.
backfaceVisibility Establecer o devolver si el elemento es visible cuando no está orientado hacia la pantalla.
borderBottom Establecer o devolver todos los atributos borderBottom en una declaración.
borderBottomColor Establecer o devolver el color del borde inferior.
borderBottomLeftRadius Establecer o devolver la forma del borde en la esquina inferior izquierda.
borderBottomRightRadius Establecer o devolver la forma del borde en la esquina inferior derecha.
borderBottomStyle Establecer o devolver el estilo del borde inferior.
borderBottomWidth Establecer o devolver el ancho del borde inferior.
borderCollapse Establecer o devolver si el borde de la tabla debe colapsarse en un solo borde.
borderColor Establecer o devolver el color del borde del elemento (se pueden establecer hasta cuatro valores).
borderImage Atributo abreviado para establecer o devolver todos los atributos borderImage.
borderImageOutset Establecer o devolver la cantidad de la región del borde de la imagen que sobrepasa el box del borde.
borderImageRepeat Establecer o devolver si la imagen del borde debe repetirse, envolverse o estirarse.
borderImageSlice Establecer o devolver la cantidad de desplazamiento hacia adentro del borde de la imagen.
borderImageSource Establecer o devolver la imagen utilizada como borde.
borderImageWidth Establecer o devolver el ancho del borde de la imagen.
borderLeft Establecer o devolver todos los atributos borderLeft en una declaración.
borderLeftColor Establecer o devolver el color del borde izquierdo.
borderLeftStyle Establecer o devolver el estilo del borde izquierdo.
borderLeftWidth Establecer o devolver el ancho del borde izquierdo.
borderRadius Atributo abreviado para establecer o devolver todos los cuatro atributos borderRadius.
borderRight Establecer o devolver todos los atributos borderRight en una declaración.
borderRightColor Establecer o devolver el color del borde derecho.
borderRightStyle borderRightStyle
borderRightStyle establecer o devolver el estilo del borde derecho.
borderRightWidth establecer o devolver el ancho del borde derecho.
borderSpacing establecer o devolver el espacio entre las celdas de la tabla.
borderStyle establecer o devolver el estilo del borde del elemento (se pueden establecer hasta cuatro valores).
borderTop establecer o devolver todos los atributos borderTop en una declaración.
borderTopColor establecer o devolver el color del borde superior.
borderTopLeftRadius establecer o devolver la forma del borde superior izquierdo.
borderTopRightRadius establecer o devolver el estilo del borde superior.
borderTopWidth establecer o devolver el ancho del borde superior.
borderWidth establecer o devolver el ancho del borde del elemento (se pueden establecer hasta cuatro valores).
bottom establecer o devolver la posición inferior del elemento alineado.
boxDecorationBreak establecer o devolver el comportamiento del fondo y los bordes del elemento durante la paginación, o para los elementos en línea, durante la nueva línea.
boxShadow adjuntar una o más sombras a un cuadro (box).
boxSizing permite definir ciertos elementos para que se ajusten de alguna manera a una área.
captionSide establecer o devolver la posición del título de la tabla.
caretColor establecer o devolver el color del cursor de inserción.
clear establecer o devolver la posición del elemento en relación con los objetos flotantes.
clip establecer o devolver qué parte del elemento de alineación está visible.
color establecer o devolver el color del texto.
columnCount establecer o devolver el número de columnas en el que debe dividirse el elemento.
columnFill establecer o devolver cómo se rellenan las columnas.
columnGap establecer o devolver el espacio entre las columnas.
columnRule propiedad abreviada para establecer o devolver todas las propiedades columnRule.
columnRuleColor establecer o devolver el color de la regla entre las columnas.
columnRuleStyle establecer o devolver el estilo de la regla entre las columnas.
columnRuleWidth establecer o devolver el ancho de la regla entre las columnas.
columns propiedad abreviada para establecer o devolver columnWidth y columnCount.
columnSpan establecer o devolver cuántas columnas debe cruzar el elemento.
columnWidth establecer o devolver el ancho de la columna.
content Usado junto con los pseudo-elementos :before y :after, insertar el contenido generado.
counterIncrement Incrementar uno o más contadores.
counterReset Crear o restablecer uno o más contadores.
cursor Establecer o devolver el tipo de cursor que se muestra al puntero del ratón.
direction Establecer o devolver la dirección del texto.
display Establecer o devolver el tipo de visualización del elemento.
emptyCells Establecer o devolver si se debe mostrar el borde y el fondo de las celdas vacías.
filter Establecer o devolver el filtro de la imagen (efectos visuales como el borroso y la saturación).
flex Establecer o devolver la longitud del elemento en relación con el resto.
flexBasis Establecer o devolver la longitud inicial del elemento flexible.
flexDirection Establecer o devolver la dirección del elemento flexible.
flexFlow Atributo abreviado de flexDirection y flexWrap.
flexGrow Establecer o devolver la cantidad de crecimiento del elemento en relación con otros elementos.
flexShrink Establecer o devolver la forma de contracción del elemento en relación con otros elementos.
flexWrap Establecer o devolver si el elemento flexible debe saltear a la siguiente línea.
cssFloat Establecer o devolver el alineamiento horizontal del elemento.
font Establecer o devolver las propiedades de la fuente en una declaración.
fontFamily Establecer o devolver la familia de fuentes del texto.
fontSize Establecer o devolver el tamaño de la fuente del texto.
fontStyle Establecer o devolver si el estilo de la fuente es normal, cursiva o oblicua.
fontVariant Establecer o devolver si la fuente se debe mostrar en minúsculas mayúsculas.
fontWeight Establecer o devolver la espesura de la fuente.
fontSizeAdjust Mantener la legibilidad del texto en caso de retroceso de fuente.
fontStretch Elegir el modo de deformación elástica de la fuente.
hangingPunctuation Especificar si los signos de puntuación pueden colocarse fuera del cuadro de línea.
height Establecer o devolver la altura del elemento.
hyphens Establecer cómo dividir las palabras para mejorar la disposición del párrafo.
icon Permitir que el autor utilice equivalencias iconográficas para establecer el estilo del elemento.
imageOrientation Especificar la rotación a la derecha o en sentido horario que aplica el agente de usuario a la imagen.
isolation Definir si el elemento debe crear nuevo contenido de apilamiento.
justifyContent Establecer o devolver el alineamiento entre los elementos dentro de un contenedor flexible cuando no se utilice todo el espacio disponible.
left Establecer o devolver la posición lateral izquierda del elemento de posicionamiento.
letterSpacing Establecer o devolver el espacio entre los caracteres del texto.
lineHeight Establecer o devolver la distancia entre las líneas de texto.
listStyle Establecer o devolver la lista de estilo en una declaración.
listStyleImage Establecer o devolver la imagen como marcador de la lista.
listStylePosition Establecer o devolver la posición del marcador de la lista.
listStyleType Establecer o devolver el tipo de marcador de la lista.
margin Establecer o devolver la margen del elemento (se pueden establecer hasta cuatro valores).
marginBottom Establecer o devolver la margen inferior externa del elemento.
marginLeft Establecer o devolver la margen izquierda externa del elemento.
marginRight Establecer o devolver la margen derecha externa del elemento.
marginTop Establecer o devolver la margen superior externa del elemento.
maxHeight Establecer o devolver la altura máxima del elemento.
maxWidth Establecer o devolver el ancho máximo del elemento.
minHeight Establecer o devolver la altura mínima del elemento.
minWidth Establecer o devolver el ancho mínimo del elemento.
navDown Establecer o devolver la posición de navegación cuando se utiliza la tecla de navegación hacia abajo.
navIndex Establecer o devolver el orden de salto del elemento.
navLeft Establecer o devolver la posición de navegación cuando se utiliza la tecla de navegación hacia la izquierda.
navRight Establecer o devolver la posición de navegación cuando se utiliza la tecla de navegación hacia la derecha.
navUp Establecer o devolver la posición de navegación cuando se utiliza la tecla de navegación hacia arriba.
objectFit Especificar cómo se debe ajustar el contenido del elemento sustituido al cuadro establecido por su altura y anchura.
objectPosition Especificar cómo se alinea el elemento sustituido dentro de su cuadro.
opacity Establecer o devolver el nivel de opacidad del elemento.
order Establecer o devolver el orden relativo de los elementos flexibles en comparación con el resto de los elementos.
orphans Establecer o devolver el número mínimo de líneas que deben permanecer en la parte inferior de la página cuando ocurre la paginación interna del elemento.
outline Establecer o devolver todos los atributos outline en una declaración.
outlineColor Establecer o devolver el color del contorno alrededor del elemento.
outlineOffset Desplazar el contorno y dibujarlo fuera del borde.
outlineStyle Establecer o devolver el estilo del contorno alrededor del elemento.
outlineWidth Establecer o devolver el ancho del contorno alrededor del elemento.
overflow Establecer o devolver cómo se maneja el contenido que se presenta fuera del cuadro del elemento.
overflowX Se especifica cómo manejar los bordes izquierdo/derecho del contenido, si se desbordan del área del contenido del elemento.
overflowY Especificar cómo manejar los bordes superior/inferior del contenido, si se desborda el área de contenido del elemento.
padding Establecer o devolver el margen interno del elemento (se pueden establecer hasta cuatro valores).
paddingBottom Establecer o devolver el margen inferior interno del elemento.
paddingLeft Establecer o devolver el margen izquierdo interno del elemento.
paddingRight Establecer o devolver el margen derecho interno del elemento.
paddingTop Establecer o devolver el margen superior interno del elemento.
pageBreakAfter Establecer o devolver el comportamiento de paginación después del elemento.
pageBreakBefore Establecer o devolver el comportamiento de paginación antes del elemento.
pageBreakInside Establecer o devolver el comportamiento de paginación dentro del elemento.
perspective Establecer o devolver la perspectiva de visualización del elemento 3D.
perspectiveOrigin Establecer o devolver la posición inferior del elemento 3D.
position Establecer o devolver el tipo de método de ubicación del elemento (estático, relativo, absoluto o fijo).
quotes Establecer o devolver el tipo de comillas para las comillas incrustadas.
resize Establecer o devolver si el elemento puede ser ajustado en tamaño por el usuario.
right Establecer o devolver la posición lateral del elemento de ubicación.
scrollBehavior Especificar si hay un efecto de animación de desplazamiento suave cuando el usuario hace clic en un enlace dentro de un cuadro desplazable, en lugar de saltar directamente.
tableLayout Establecer o devolver el modo de disposición de las celdas, filas y columnas de la tabla.
tabSize Establecer o devolver la longitud del tabulador.
textAlign Establecer o devolver el modo de alineación horizontal del texto.
textAlignLast Al ser text-align "justify", establecer o devolver cómo se alinea la última línea del bloque o la línea forzada antes de la nueva línea.
textDecoration Establecer o devolver la decoración del texto.
textDecorationColor Establecer o devolver el color de la decoración del texto.
textDecorationLine Establecer o devolver el tipo de línea en la decoración del texto.
textDecorationStyle Establecer o devolver el estilo de la línea en la decoración del texto.
textIndent Establecer o devolver el sangrado del primer renglón de texto.
textJustify Establecer o devolver el método de alineación utilizado cuando text-align es "justify".
textOverflow Establecer o devolver lo que debe ocurrir cuando el texto se desborda del elemento contenedor.
textShadow Establecer o devolver el efecto de sombra del texto.
textTransform Establecer o devolver el tamaño de la fuente del texto.
top Establecer o devolver la posición superior del elemento de posicionamiento.
transform Aplicar transformaciones 2D o 3D a un elemento.
transformOrigin Establecer o devolver la posición del elemento transformado.
transformStyle Establecer o devolver cómo se renderiza el elemento anidado en el espacio 3D.
transition Usado para establecer o devolver una propiedad abreviada de cuatro propiedades de transformación.
transitionProperty Establecer o devolver las propiedades CSS del efecto de transición.
transitionDuration Establecer o devolver los segundos o milisegundos necesarios para que finalice el efecto de transición.
transitionTimingFunction Establecer o devolver la curva de velocidad del efecto de transición.
transitionDelay Establecer o devolver cuándo comienza el efecto de transición.
unicodeBidi Establecer o devolver si se debe cubrir el texto para soportar varios idiomas en el mismo documento.
userSelect Establecer o devolver si se puede seleccionar el texto del elemento.
verticalAlign Establecer o devolver la alineación vertical del contenido del elemento.
visibility Establecer o devolver si el elemento es visible.
whiteSpace Establecer o devolver cómo se manejan los tabuladores, saltos de línea y espacios en el texto.
width Establecer o devolver el ancho del elemento.
wordBreak Establecer o devolver las reglas de salto de línea para los scripts no CJK.
wordSpacing Establecer o devolver el espacio entre palabras en el texto.
wordWrap Permite que las palabras largas e ininterrumpibles se rompan y se desplacen a la siguiente línea.
widows Establecer o devolver el número mínimo de líneas que debe estar visible en la parte superior de la página del elemento.
zIndex Establecer o devolver la secuencia de pila del elemento de posicionamiento.

Acceder al objeto Style

Se puede acceder al objeto Style desde la sección head del documento o desde un elemento HTML específico.

Ejemplo 1

Acceder al objeto de estilo desde la sección head del documento:

var x = document.getElementsByTagName("STYLE");

Prueba por tu cuenta

Ejemplo 2

Acceder al objeto de estilo de un elemento específico:

var x = document.getElementById("myH1").style;

Prueba por tu cuenta

Crear objeto Style

Ejemplo 1

Puede usar el método document.createElement() para crear un elemento <style>:

var x = document.createElement("STYLE");

Prueba por tu cuenta

Ejemplo 2

También puede establecer las propiedades de estilo de los elementos existentes:

document.getElementById("myH1").style.color = "red";

Prueba por tu cuenta

Páginas relacionadas

Tutoriales de HTML:HTML CSS

Tutoriales de CSS:Tutoriales CSS

Manual de Referencia de HTML:Etiqueta <style> de HTML

Manual de Referencia de CSS:Atributos CSS