问题
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.
回答1:
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), "")
回答2:
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>
回答3:
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)"
回答4:
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;
回答5:
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.
回答6:
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.
来源:https://stackoverflow.com/questions/29196991/js-failed-to-execute-getcomputedstyle-on-window-parameter-is-not-of-type