JS: Failed to execute 'getComputedStyle' on 'Window': parameter is not of type 'Element'
Asked Answered
B

11

49

In short: I am trying to understand the meaning of this:

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

The error appears while lunching Mediawiki's VisualEditor, as can be seen here: http://www.wiki.org.il/index.php?title=new-page&veaction=edit

The error doesn't enables creating new pages or editing the wiki anonymously. However, with the use of a different skin the error disappears: http://www.wiki.org.il/index.php/Main_Page?useskin=vector

The wiki runs on 1.25alpha.

Burnham answered 22/3, 2015 at 16:38 Comment(0)
S
22

I had this same error showing. When I replaced jQuery selector with normal JavaScript, the error was fixed.

var this_id = $(this).attr('id');

Replace:

getComputedStyle( $('#'+this_id)[0], "")

With:

getComputedStyle( document.getElementById(this_id), "")
Simonsimona answered 24/4, 2015 at 7:33 Comment(3)
getComputedStyle( document.getElementById(this_id)) will not work. getting the same errorBranchiopod
It could be that at the time your getComputedStyle(...) code runs the element with id this_id is not actually present in the DOM. If your also dealing with adding/removing elements that is.Lisabethlisan
In my case I was initializing a .collapsible Element, but my structure was wrong, I had a form container for each li Element. Removing the form solved it.Desertion
S
7

The error message says that getComputedStyle requires the parameter to be Element type. You receive it because the parameter has an incorrect type.

The most common case is that you try to pass an element that doesn't exist as an argument:

my_element = document.querySelector(#non_existing_id);

Now that element is null, this will result in mentioned error:

my_style = window.getComputedStyle(my_element);

If it's not possible to always get element correctly, you can, for example, use the following to end function if querySelector didn't find any match:

if (my_element === null) return;
Sugarcoat answered 29/5, 2019 at 16:31 Comment(0)
D
4

For those who got this error in AngularJS and not jQuery:

I got it in AngularJS v1.5.8 by trying to ng-include a type="text/ng-template" that didn't exist.

 <div ng-include="tab.content">...</div>

Make sure that when you use ng-include, the data for that directive points to an actual page/section. Otherwise, you probably wanted:

<div>{{tab.content}}</div>
Dymphia answered 3/11, 2017 at 14:2 Comment(0)
C
1

In my case I was using ClassName.

getComputedStyle( document.getElementsByClassName(this_id)) //error

It will also work without 2nd argument " ".

Here is my complete running code :

function changeFontSize(target) {

  var minmax = document.getElementById("minmax");

  var computedStyle = window.getComputedStyle
        ? getComputedStyle(minmax) // Standards
        : minmax.currentStyle;     // Old IE

  var fontSize;

  if (computedStyle) { // This will be true on nearly all browsers
      fontSize = parseFloat(computedStyle && computedStyle.fontSize);

      if (target == "sizePlus") {
        if(fontSize<20){
        fontSize += 5;
        }

      } else if (target == "sizeMinus") {
        if(fontSize>15){
        fontSize -= 5;
        }
      }
      minmax.style.fontSize = fontSize + "px";
  }
}


onclick= "changeFontSize(this.id)"
Continuation answered 17/7, 2018 at 8:16 Comment(0)
P
1

I have experienced the same issue in a jQuery plugin that I'm modifying for my own use. Basically, you can see from documentation that the parameter passed into getComputedStyle must be of type Element. Your plugin is passing window, the global variable pointing to the browser window, which is of type Window (who would have guessed?) into the function call. Their code looks something like this, I'm guessing:

var x = window.getComputedStyle(e);

They're probably calling this from a generic function that didn't verify that e is actually an Element and not a Window.

In my case, I'm only trying to circumvent the jQuery width() method on elements and include the border width and padding width. (It was a true doozy to figure out why I had to do that.) I reviewed how jQuery determines if the element is a Window and handled it similarly. Ultimately, this is what I ended up doing in my use case:

function getWidth(e) {
    if (e != null && e === e.window) {
        return $(e).width();
    }
    const css = window.getComputedStyle(e[0]);
    const width = parseInt(css.width);
    const pLeft = parseInt(css.paddingLeft);
    const pRight = parseInt(css.paddingRight);
    const bLeft = parseInt(css.borderLeft);
    const bRight = parseInt(css.borderRight);
    return width + pLeft + pRight + bLeft + bRight;
}
Pruinose answered 25/8, 2022 at 21:37 Comment(0)
B
1

i found the answer!!!

this is not correct sintax:

const getprop = window.getComputedStyle(element).getPropertyValue("margin-top");


this is the correct:

you just need to write an whole 'document.querySelector(el)'

const getprop = window.getComputedStyle(document.querySelector('.burger__menu')).getPropertyValue("margin-top");


it will be work 100%

Buckish answered 13/10, 2022 at 10:27 Comment(0)
S
0

I had the same error on my Angular6 project. none of those solutions seemed to work out for me. turned out that the problem was due to an element which was specified as dropdown but it didn't have dropdown options in it. take a look at code below:

<span class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown"
                          aria-haspopup="true" aria-expanded="false">
                        <i class="material-icons "
                           style="font-size: 2rem">notifications</i>
                        <span class="notification"></span>
                        <p>
                            <span class="d-lg-none d-md-block">Some Actions</span>
                        </p>
                    </span>
                    <div class="dropdown-menu dropdown-menu-left"
                         *ngIf="global.localStorageItem('isInSadHich')"
                         aria-labelledby="navbarDropdownMenuLink">
                                        <a class="dropdown-item" href="#">You have 5 new tasks</a>
                                        <a class="dropdown-item" href="#">You're now friend with Andrew</a>
                                        <a class="dropdown-item" href="#">Another Notification</a>
                                        <a class="dropdown-item" href="#">Another One</a>
                    </div>

removing the code data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" solved the problem.

I myself think that by each click on the first span element, the scope expected to set style for dropdown children which did not existed in the parent span, so it threw error.

Scleroma answered 15/9, 2019 at 11:50 Comment(0)
C
0

const el = document.getElementsByClassName('content-right')[0]
if (!el) return
const i = window.getComputedStyle(el).width

it is a way fix the error,but I can't figure it out why cant find the element,it should not be null!

Cornwell answered 20/8, 2021 at 2:13 Comment(1)
Hiding the errors is not fixing the problem. Read other answers for ideas.Latticed
M
0

If you're getting this error when using an input field with input type of 'number'.

Make sure your field is focused before the input changes. You can do this with a javascript function for focusing fields with ids.

Eg:

const inputField = document.getElementById('myInputField');

inputField.addEventListener('mouseenter', function() {
  this.focus();
});
Mayence answered 18/5, 2023 at 17:12 Comment(0)
T
0

if you here because of reactstockcharts .So I was also facing the same error.It was happening because I was using the reactjs version 18.x with reactstockcharts.I solved this error by downgrading the reactjs version to 16.

"react": "^16.14.0", "react-dom": "^16.14.0",

Tonicity answered 11/6 at 21:14 Comment(0)
U
-41

The error message is pretty straightforward: getComputedStyle expects an Element as its first argument, and something else was passed to it.

If what you are really asking for is help with debugging your skin, you should make more of an effort to isolate the error.

Unexpressed answered 22/3, 2015 at 23:26 Comment(3)
You mean, it expects an ìnstance of the object Element?Valval
Does not sound like a constructive criticism.Whirlpool
I agree with your point but it should be a comment not an answer.Calamondin

© 2022 - 2024 — McMap. All rights reserved.