Question

我正在通过Element.animate()构建动画，因此需要创建关键帧，如下面的代码。

但是，在某些方面，我需要设置css属性的默认值（如以下示例中的transformOrigin）。我知道默认值为50％50％，但是我不想列出所有CSS默认值，所以我想知道是否有一种方法可以通过JS获取这些值。

PS：我可以从元素中获取计算样式，但是即使更改了值，我也需要获取它的默认值。

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>

Answer 1

这是我所知道的做事方式：

为标签创建一个新的HTML元素，您需要为其提供初始属性值
将其附加到DOM
计算计算的样式并复制对象（因为从DOM中删除元素后，该值将更改为“”）
从DOM中删除
返回属性值

除了复制对象外，您还可以在删除元素并返回之前存储defaultStyles[prop].toString()的输出，但是我在这里的使用方式是开放式的，如果您想要如果要经常运行这些对象，则可以将它们缓存在查找中。

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>

如何使用JS从CSS属性获取默认值？

1 个答案: