CODEWITHSUNDEEP
javascriptjquery
Anatole Lucet
Anatole Lucet

Reputation: 1813

Argument 1 of Window.getComputedStyle does not implement interface Element

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');

Upvotes: 8

Views: 12591

Answers (2)

Racil Hilan
Racil Hilan

Reputation: 25351

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 applied 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>

Upvotes: 10

Sven van de Scheur
Sven van de Scheur

Reputation: 1903

The problem here is that you're passing a jQuery object where an Element1 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.getComputedStyle2 function.

Upvotes: 0

Related Questions