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>

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
– rafaelkendy, Commented Jul 30, 2018 at 15:12

jmcgriz · Accepted Answer · 2018-07-30 15:29:10Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related