Window.getComputedStyle的参数1不实现接口Element

Question

我有此错误，但我真的不知道为什么：

Window.getComputedStyle的参数1不实现接口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 函数，它需要一个 JavaScript 对象，而不是一个 jQuery 对象。通过它reveal[0]，它将起作用。

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

问题是当您margin像这样在 jQuery 中为属性分配一个值时reveal.css('margin', '10px')，它会应用于每个边距（顶部、右侧、底部和左侧）并且该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>