获取不到DOM的backgroundColor属性？

问题描述，最近一个防重复点击的功能，用指令实现的，为了让点击时，按钮变灰，过几秒后又变回原来的颜色，所以先用变量保存之前的背景色值。问题是：document.getElementById("button”).style.backgroundColor，这样竟然取不到背景色？

找到了答案是：

document.getElementById("").style获取的是元素行间设置的样式，不能获取到css中设置的样式。如果要获取css中设置的样式，可以试试getComputedStyle（标准浏览器）或者currentStyle(ie低版本)

没怎么看懂，看到了关键字getComputedStyle

getComputedStyle 为何物呢？DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是只读的。IE6.7.8 中则用 currentStyle 代替 。

// 语法：
// 在旧版本之前，第二个参数“伪类”是必需的，现代浏览器已经不是必需参数了
// 如果不是伪类，设置为null，
window.getComputedStyle("元素", "伪类");

尝试一下之后可以看到，window.getComputedStyle 获取的是所有的样式，如果我们只是要获取单一样式，该怎么做呢。这个时候就要介绍另一个方法 -- getPropertyValue 。

用法也很简单：

// 语法：
// 使用 getPropertyValue 来指定获取的属性
window.getComputedStyle("元素", "伪类").getPropertyValue(style);

到这里，相信大家都知道怎么解决这个问题了，下面附上我用指令实现的防重复点击的功能代码

vue.js定义指令：

Vue.directive('preventReClick', {
  inserted (el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        let bgColor = window.getComputedStyle(el, null).backgroundColor
        el.style.backgroundColor = '#ccc'
        setTimeout(() => {
          el.disabled = false
          el.style.backgroundColor = bgColor
        }, binding.value || 2000)
      }
    })
  }
})

html

<a href="javascript:;" v-preventReClick @click.prevent="pay($event)">立即购买</a>

javascript

methods: {
  pay (event) {
      if (event.target.disabled) {
        return
      }
      // TODO
  }
}