javascript - Window.getComputedStyle 的参数 1 未实现接口(interface) Element

Question

我有这个错误，但我真的不知道为什么:

Argument 1 of Window.getComputedStyle does not implement interface Element

HTML:

<div class="reveal"></div>

JavaScript/jQuery:

var reveal = $('.reveal');
reveal.css('margin', '10px');
var resulte = window.getComputedStyle(reveal, 'margin');

Answer 1

getComputedStyle() 是一个需要 JavaScript 对象而不是 jQuery 对象的 JavaScript 函数。将其传递给 reveal[0]，它将起作用。

getComputedStyle() 函数的第二个参数是可选的，它用于伪元素，而不是 CSS 属性。您可以使用 getComputedStyle() 获取所有属性，然后使用 getPropertyValue('margin') 获取您想要的特定属性。

问题是当你像这样 reveal.css('margin', '10px') 为 jQuery 中的 margin 属性赋值时，它就会被应用每个边距(顶部、右侧、底部和左侧)和 margin 属性将不返回任何内容(在某些浏览器中)。您必须分别获取每个边距。

var reveal = $('.reveal');
reveal.css('margin', '10px');
var resulte = window.getComputedStyle(reveal[0], null).getPropertyValue('margin-top');

console.log(resulte);

.reveal {
  background-color: #f00;
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reveal"></div>