Javascript JS：无法在“窗口”上执行“getComputedStyle”：参数不是“元素”类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29196991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS: Failed to execute 'getComputedStyle' on 'Window': parameter is not of type 'Element'
提问by OpenFox
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:
简而言之：我试图理解这个 TypeError 的含义：无法在 'Window' 上执行 'getComputedStyle': 参数 1 不是类型 'Element' 在使用 Mediawiki 的可视化编辑器时出现错误，如下所示：
http://www.wiki.org.il/index.php?title=new-page&veaction=edit
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:
该错误不会启用创建新页面或匿名编辑 wiki。但是，使用不同的皮肤后，错误就会消失：
http://www.wiki.org.il/index.php/Main_Page?useskin=vector
http://www.wiki.org.il/index.php/Main_Page?useskin=vector
The wiki runs on 1.25alpha.
维基在 1.25alpha 上运行。
回答by Anish
I had this same error showing. When I replaced jQuery selector with normal JavaScript, the error was fixed.
我有同样的错误显示。当我用普通的 JavaScript 替换 jQuery 选择器时，错误得到了修复。
var this_id = $(this).attr('id');
Replace:
代替：
getComputedStyle( $('#'+this_id)[0], "")
With:
和：
getComputedStyle( document.getElementById(this_id), "")
回答by J.D. Mallen
For those who got this error in AngularJS and not jQuery:
对于那些在 AngularJS 而不是 jQuery 中得到这个错误的人：
I got it in AngularJS v1.5.8 by trying to ng-includea type="text/ng-template"that didn't exist.
我试图通过了它在AngularJS v1.5.8ng-include一个type="text/ng-template"不存在的。
<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:
确保在使用 ng-include 时，该指令的数据指向实际的页面/部分。否则，您可能想要：
<div>{{tab.content}}</div>
回答by Pushpender Singh
In my case I was using ClassName.
就我而言，我使用的是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)"
回答by Ryszard J?draszyk
The error message says that getComputedStylerequires the parameter to be Elementtype. You receive it because the parameter has an incorrect type.
错误消息说getComputedStyle需要参数Element类型。您收到它是因为参数的类型不正确。
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:
现在该元素是null，这将导致提到的错误：
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 querySelectordidn't find any match:
如果无法始终正确获取元素，例如，如果querySelector未找到任何匹配项，您可以使用以下命令结束函数：
if (my_element === null) return;
回答by Far
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 dropdownbut it didn't have dropdown options in it. take a look at code below:
我的 Angular6 项目也有同样的错误。这些解决方案似乎都不适合我。原来问题是由于一个元素被指定为dropdown但它没有下拉选项。看看下面的代码：
<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.
删除代码data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"解决了问题。
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.
我自己认为，每次单击第一个 span 元素时，范围预计会为父 span 中不存在的下拉子项设置样式，因此会引发错误。
回答by Tgr
The error message is pretty straightforward: getComputedStyleexpects an Elementas its first argument, and something else was passed to it.
错误消息非常简单：getComputedStyle需要一个Element作为它的第一个参数，并且其他东西被传递给它。
If what you are really asking for is help with debugging your skin, you should make more of an effort to isolate the error.
如果您真正需要的是帮助调试您的皮肤，您应该更加努力地隔离错误。
