How to get a default value from CSS property using JS?

Question

I am building an animation via Element.animate(), so I need to create the keyframes like the code below.

However, at some part, I need to set the default value of a css property (like the transformOrigin in the following example). I know the default value is 50% 50%, but I don't want to have a list of all css default values, so I am wondering if there is a method to get those values via JS.

PS: I can get computed styles from an element, but I need to get a default value of it, even after changing the value.

let box = document.querySelector('.box')

let keyframe1 = {
  position: 'absolute',
  transformOrigin: '0% 0%',
  background: 'red',
  width: '100px',
  height: '100px',
  transform: 'rotate(0deg)'
}

let keyframe2 = {
  position: 'absolute',
  transformOrigin: '0% 0%',
  background: 'red',
  width: '100px',
  height: '100px',
  transform: 'rotate(90deg)'
}

box.animate([keyframe1, keyframe2], {
  duration: 1000,
  iterations: Infinity
})

setTimeout(() => {
  keyframe2.transformOrigin = '50% 50%'

  box.animate([keyframe1, keyframe2], {
    duration: 1000,
    iterations: Infinity
  })
}, 5000)

<div class="box"></div>

Possible duplicate of [How to get all CSS of element](https://stackoverflow.com/questions/15000163/how-to-get-all-css-of-element) — chevybow, Jul 30 '18 at 15:05
Possible duplicate of [Get a CSS value with JavaScript](https://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript) — str, Jul 30 '18 at 15:06
I don't want to get the css properties, but the default value of a property. And it can't be 'initial' because it does not animate. — rafaelkendy, Jul 30 '18 at 15:12

score 2 · Accepted Answer · answered Jul 30 '18 at 15:29

This is the way that I know of to do it:

Create a new HTML element of the tag that you need the initial property value for
Append it to the DOM
Calculate computed style and copy the object (because the value will change to "" after you remove the element from the DOM)
Remove it from the DOM
Return the property value

Instead of copying the object, you could also potentially store the output of defaultStyles[prop].toString() before removing the element and return that, but the way I have it here is a little more open-ended in terms of if you want to cache the objects in a lookup if you're going to running these frequently.

function getDefaultProperty(tag, prop){
  try {
    const elem = document.createElement(tag)
    document.body.appendChild(elem)
    const defaultStyles = Object.assign({}, window.getComputedStyle(elem))
    document.body.removeChild(elem)
    return defaultStyles[prop]
  }catch(err){
    return err
  }
}

document.querySelector('button').addEventListener('click', e => {
  const tagname = document.getElementById('elem').value,
    property = document.getElementById('prop').value
    
  console.log(getDefaultProperty(tagname, property))
})

<label>Tagname: <input type="text" id="elem" value="div" /></label>
<label>Property: <input type="text" id="prop" value="display" /></label>
<button>Get default property value</button>

How to get a default value from CSS property using JS?

1 Answers1