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

Question

I have this error, but I don't really know why:

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() is a JavaScript function that expects a JavaScript object, not a jQuery object. Pass it reveal[0] and it will work.

The second argument of the getComputedStyle() function is optional and it is for the pseudo element, not the CSS property. You can use getComputedStyle() to get all the properties and then use getPropertyValue('margin') to get the specific property that you want.

The problem is when you assign a value to the margin property in jQuery like this reveal.css('margin', '10px') , then it gets applies to each of the margins (top, right, bottom, and left) and the margin property will return nothing (in some browsers). You'll have to get each margin separately.

 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> 

Answer 2

The problem here is that you're passing a jQuery object where an Element 1 is expected.

You're mixing up jQuery and (vanilla/plain) JavaScript, which are NOT the same. JavaScript is a language and jQuery is a library that allows you to deal with (primarily) the DOM.

A jQuery object not always interchangeable with JavaScript so you need to extract the actual matched elements.

A jQuery object (from the top of my head) is basically an advanced iterable which contains all of it's matched elements in inside. If you only expect one match it should be in reveal[0] .

reveal[0] should in that case be an Element or HTMLElement which you can then pass to the window.getComputedStyle 2 function.