CSSStyleDeclaration : Object

CSSStyleDeclaration allows styling HTMLElements. The HTMLElement.style property contains the style rules directly set on the element. Use the window.getComputedStyle() method to get the computed style of an element.

Spec

Instance Properties

alignContent : String

alignItems : String

alignmentBaseline : String

Example:

<svg id='svg' width='250' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>
<script>
  var svg = document.getElementById('svg');
 
  var alignmentBaselines = [
    'after-edge', 'alphabetic', 'auto', 'baseline',
    'before-edge', 'central', 'hanging', 'ideographic',
    'inherit', 'initial', 'mathematical', 'middle',
    'text-after-edge', 'text-before-edge'];

  alignmentBaselines.forEach(function(option, i) {
    
    var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('y', (i + 1) * 30);

    var textNode = document.createTextNode('alignmentBaseline: ');
    text.appendChild(textNode);

    // Create a tspan that can be styled
    var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    tspan.style.alignmentBaseline = option;

    textNode = document.createTextNode(option);
    tspan.appendChild(textNode);

    text.appendChild(tspan);

    svg.appendChild(text);
  });
</script>

Run

Results:

Spec

alignSelf : String

all : String

animation : String

animationDelay : String

animationDirection : String

animationDuration : String

animationFillMode : String

animationIterationCount : String

animationName : String

animationPlayState : String

animationTimingFunction : String

backfaceVisibility : String

background : String

Spec

backgroundAttachment : String

Spec

backgroundBlendMode : String

backgroundClip : String

Spec

backgroundColor : String

Spec

backgroundImage : String

The image to place in the background of the element. See also backgroundPosition, backgroundRepeat, and backgroundSize.

Example:

<div id="element" style="height: 200px"></div>
<script>
  var element = document.getElementById('element');
  element.style.backgroundImage = 'url(/pic.jpg)';
</script>

Run

Results:

Spec

backgroundOrigin : String

Spec

backgroundPosition : String

Spec

backgroundPositionX : String

backgroundPositionY : String

backgroundRepeat : String

Spec

backgroundRepeatX : String

backgroundRepeatY : String

backgroundSize : String

Spec

baselineShift : String

Spec

blockSize : String

border : String

Spec

borderBlockEnd : String

borderBlockEndColor : String

borderBlockEndStyle : String

borderBlockEndWidth : String

borderBlockStart : String

borderBlockStartColor : String

borderBlockStartStyle : String

borderBlockStartWidth : String

borderBottom : String

Spec

borderBottomColor : String

Spec

borderBottomLeftRadius : String

Spec

borderBottomRightRadius : String

Spec

borderBottomStyle : String

borderBottomWidth : String

borderCollapse : String

borderColor : String

borderImage : String

borderImageOutset : String

borderImageRepeat : String

borderImageSlice : String

borderImageSource : String

borderImageWidth : String

borderInlineEnd : String

borderInlineEndColor : String

borderInlineEndStyle : String

borderInlineEndWidth : String

borderInlineStart : String

borderInlineStartColor : String

borderInlineStartStyle : String

borderInlineStartWidth : String

borderLeft : String

borderLeftColor : String

borderLeftStyle : String

borderLeftWidth : String

borderRadius : String

borderRight : String

borderRightColor : String

borderRightStyle : String

borderRightWidth : String

borderSpacing : String

borderStyle : String

Spec

borderTop : String

borderTopColor : String

borderTopLeftRadius : String

borderTopRightRadius : String

borderTopStyle : String

borderTopWidth : String

borderWidth : String

bottom : String

boxDecorationBreak : String

boxShadow : String

boxSizing : String

bufferedRendering : String

captionSide : String

clear : String

clip : String

clipPath : String

See SVGClipPathElement.

clipRule : String

color : String

colorInterpolation : String

colorInterpolationFilters : String

colorProfile : String

colorRendering : String

content : String

counterIncrement : String

counterReset : String

cssFloat : String

cssText : String

The string of CSS rules of the style.

Example:

<span id='foo' style='color: red; font-weight: bold'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.style.cssText);
</script>

Run

Results:

cursor : String

The shape of the mouse cursor while over the styled element.

Example:

<body></body>
<script>
var cursorTypes = [
  'auto', 'none', 'alias', 'crosshair', 'default', 'hand', 'help',
  'context-menu', 'pointer', 'progress', 'wait', 'cell', 'copy',
  'no-drop', 'not-allowed', 'text', 'vertical-text', 'all-scroll',
  'move', 'col-resize', 'row-resize', 'n-resize', 'ne-resize', 
  'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize',
  'nw-resize', 'ew-resize', 'ns-resize', 'nwse-resize', 
  'nesw-resize', 'zoom-in', 'zoom-out', 
  'url(/favicon.ico), auto'];

cursorTypes.forEach(function(type) {
  var div = document.createElement('div');

  div.textContent = type;
  div.style.cursor = type;

  document.body.appendChild(div);
});
</script>

Run

Results:

cx : String

cy : String

direction : String

display : String

Example:

<span id='foo' style='color: red; font-weight: bold'>foo</span>
<span id='bar' style='color: blue'>bar</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.style.length);

  var bar = document.getElementById('bar');
  console.log(bar.style.length);
</script>

Run

Results:

letterSpacing : String

lightingColor : String

lineHeight : String

listStyle : String

listStyleImage : String

listStylePosition : String

listStyleType : String

margin : String

marginBlockEnd : String

marginBlockStart : String

marginBottom : String

marginInlineEnd : String

marginInlineStart : String

marginLeft : String

marginRight : String

marginTop : String

marker : String

markerEnd : String

markerMid : String

markerOffset : String

markerStart : String

mask : String

maskType : String

maxBlockSize : String

maxHeight : String

maxInlineSize : String

maxWidth : String

maxZoom : String

minBlockSize : String

minHeight : String

minInlineSize : String

minWidth : String

minZoom : String

mixBlendMode : String

motion : String

motionOffset : String

motionPath : String

motionRotation : String

objectFit : String

Applies to <img> and <video> elements. Determines how the content of the element fits inside its CSS layout box. Similar to how backgroundSize affects how the backgroundImage. Must be one of 'fill', 'contain', 'cover', 'none', or 'scale-down'. See also objectPosition.

Example:

<style>
  img {
    width: 60px;
    height: 130px;
    background: #eee;
    border: 1px solid gray;
    padding: 3px;
    vertical-align: middle;    
  }
  span {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 10px;
  }
</style>
<div id='container'></div>
<script>
  var fits = ['fill', 'contain', 'cover', 'none', 'scale-down'];

  fits.forEach(function(fit, i) {
    document.getElementById('container').insertAdjacentHTML('beforeend', 
      '<span>' + fit + ' </span>' +
      '<img src="/pic.jpg" style="object-fit: ' + fit + ';"><br>');
  });
</script>

Run

Results:

Spec

objectFit : String

objectPosition : String

Applies to <img> and <video> elements. Specifies the X and Y positions of where the content of the element fits inside its CSS layout box. Similar to how backgroundPosition affects how the backgroundImage. See also objectFit.

Example:

<style>
  img {
    width: 60px;
    height: 130px;
    background: #eee;
    border: 1px solid gray;
    padding: 3px;
  }
</style>
<table id='table'>
  <tr>
    <th>position</th>
    <th>fit=contain</th>
    <th>fit=cover</th>
  </tr>
</table>
<script>
  var positions = ['0% 0%', '50% 50%', '100% 100%'];

  positions.forEach(function(position, i) {
    document.getElementById('table').insertAdjacentHTML('beforeend', 
      '<tr>' +
        '<td>' + position + ' </td>' +
        '<td><img src="/pic.jpg" style="object-position:' + position + '; object-fit: contain;"></td>'+
        '<td><img src="/pic.jpg" style="object-position:' + position + '; object-fit: cover;"></td>' +
      '</tr>');
  });
</script>

Run

Results:

Spec

objectPosition : String

offsetBlockEnd : String

offsetBlockStart : String

offsetInlineEnd : String

offsetInlineStart : String

opacity : String

order : String

orientation : String

orphans : String

outline : String

outlineColor : String

outlineOffset : String

outlineStyle : String

outlineWidth : String

overflow : String

overflowWrap : String

overflowX : String

overflowY : String

padding : String

paddingBlockEnd : String

paddingBlockStart : String

paddingBottom : String

paddingInlineEnd : String

paddingInlineStart : String

paddingLeft : String

paddingRight : String

paddingTop : String

page : String

pageBreakAfter : String

pageBreakBefore : String

pageBreakInside : String

paintOrder : String

parentRule : String

perspective : String

perspectiveOrigin : String

pointerEvents : String

position : String

quotes : String

r : String

resize : String

right : String

rubyAlign : String

rubyPosition : String

rx : String

ry : String

scrollBehavior : String

scrollSnapCoordinate : String

scrollSnapDestination : String

scrollSnapPointsX : String

scrollSnapPointsY : String

scrollSnapType : String

scrollSnapTypeX : String

scrollSnapTypeY : String

shapeImageThreshold : String

shapeMargin : String

shapeOutside : String

shapeRendering : String

size : String

speak : String

src : String

stopColor : String

stopOpacity : String

stroke : String

strokeDasharray : String

strokeDashoffset : String

strokeLinecap : String

strokeLinejoin : String

strokeMiterlimit : String

strokeOpacity : String

strokeWidth : String

tableLayout : String

tabSize : String

textAlign : String

textAnchor : String

textDecoration : String

textDecorationColor : String

textDecorationLine : String

textDecorationStyle : String

textIndent : String

textLineThrough : String

textLineThroughColor : String

textLineThroughMode : String

textLineThroughStyle : String

textLineThroughWidth : String

textOrientation : String

textOverflow : String

textOverline : String

textOverlineColor : String

textOverlineMode : String

textOverlineStyle : String

textOverlineWidth : String

textRendering : String

textShadow : String

textTransform : String

textUnderline : String

textUnderlineColor : String

textUnderlineMode : String

textUnderlineStyle : String

textUnderlineWidth : String

top : String

touchAction : String

transform : String

transformBox : String

transformOrigin : String

transformStyle : String

transition : String

transitionDelay : String

transitionDuration : String

transitionProperty : String

transitionTimingFunction : String

unicodeBidi : String

unicodeRange : String

userZoom : String

vectorEffect : String

verticalAlign : String

visibility : String

whiteSpace : String

widows : String

width : String

willChange : String

wordBreak : String

wordSpacing : String

wordWrap : String

writingMode : String

x : String

y : String

zIndex : String

zoom : String

Instance Methods

getPropertyValue(name : String) : String

Gets the value of the specified CSS property/variable.

Example:

<style>
  div {
    --my-property: red;
    color: var(--my-property);
  }
</style>
<div>div with property</div>
<script>
  const div = document.querySelector('div');
  const computedStyle = getComputedStyle(div);
  console.log(computedStyle.getPropertyValue('--my-property'));
  console.log(computedStyle.getPropertyValue('color'));
</script>

Run

Results:

setPropertyValue(name : String, value : String, [priority : String]) : String

Sets the value of the specified CSS property/variable. If specified, priority must be one of 'important' or ''.

Example:

<style>
  div {
    --my-property: red;
    color: var(--my-property);
  }
</style>
<div>div with property</div>
<script>
  const div = document.querySelector('div');
  div.style.setProperty('--my-property', 'blue');

  // The following are equivalent:
  div.style.setProperty('font-size', '2em');
  div.style.fontSize = '2em';
</script>

Run

Results:

home license contribute feedback toggle light/dark mode