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

【问题标题】：How to get a default value from CSS property using JS?如何使用 JS 从 CSS 属性中获取默认值？
【发布时间】：2019-01-06 21:06:11
【问题描述】：

我正在通过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)

&lt;div class="box"&gt;&lt;/div&gt;

【问题讨论】：

How to get all CSS of element的可能重复
Get a CSS value with JavaScript的可能重复
我不想获取css属性，而是获取属性的默认值。而且它不能是“初始的”，因为它没有动画。

标签： javascript html css

【解决方案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>

【讨论】：