Question

我有这个错误，但我真的不知道原因：

Window.getComputedStyle的参数1未实现接口元素

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')获取所需的特定属性。

问题是当您为jQuery中的margin属性分配值，例如reveal.css('margin', '10px')时，它会应用于每个边距（顶部，右侧，底部和左侧）和margin属性不会返回任何内容（在某些浏览器中）。您必须单独获得每个保证金。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这里的问题是您传递的jQuery对象需要Element 1。

你混淆了jQuery和（vanilla / plain）JavaScript，它们不一样。 JavaScript是一种语言，jQuery是一个允许您（主要）处理DOM的库。

jQuery对象并不总是可以与JavaScript互换，因此您需要提取实际匹配的元素。

一个jQuery对象（从我的脑海中开始）基本上是一个高级迭代，它包含了内部所有匹配的元素。如果您只想要一个匹配，那么它应该在reveal[0]。

在这种情况下，

reveal[0]应该是Element或HTMLElement，您可以将其传递给window.getComputedStyle 2函数。

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

2 个答案: