时间戳

首页 > 解决方案 > 如何使用 JS 从 CSS 属性中获取默认值？

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

问题描述

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

标签： javascripthtmlcss

解决方案

这是我知道的这样做的方式：

  1. 创建需要初始属性值的标记的新 HTML 元素
  2. 将其附加到 DOM
  3. 计算计算样式并复制对象（因为从 DOM 中删除元素后值将变为 ""）
  4. 从 DOM 中删除它
  5. 返回属性值

除了复制对象之外，您还可以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>

推荐阅读