Argument 1 of Window.getComputedStyle does not implement interface 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>