本文主要是介绍Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Write By Monkeyfly
以下内容均为原创，如需转载请注明出处。
前提
- 复制了一份别人写的自定义的显示隐藏方法，准备在我的
js中用一下，结果使用后刚一运行就报错了。
问题代码如下所示：
//自定义的控制显示或隐藏的方法，该方法接收两个参数，参数1表示要显示的元素，参数2表示要隐藏的元素（参数可以为空）
function showOrhide(show,hide){console.log($(show));//后来调试代码加上的，为了定位问题console.log($(hide));//后来调试代码加上的，为了定位问题if($(show)){$(show).show();}if($(hide)){$(hide).hide();}if(hide === ".share-friends-page"){$(".share-btn").removeAttr('isClick');}
}
//给按钮注册点击方法
$(".share-btn").click(function(event) {$(".share-btn").attr("isClick","yes");showOrhide(".share-friends-page","");//此处调用定义的显示或隐藏的方法【会报错】
});报错详情：
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
具体错误如下图所示：
问题说明：
未捕获的类型错误：不能在“窗口”环境上调用执行“getComputedStyle”方法：因为参数1不是“元素”类型。
- 看了错误后就懵逼了，因为自己也是第一次遇到这种错误，也不知道错在哪里了，只好去问度娘，但是效果并不奏效，没有得到什么实际的帮助。
- 最后，就打算自己调试一下代码，准确定位一下问题的所在。
错误调试：
说明：
在调用showOrhide(".share-friends-page","");方法时，第一个参数有值，而第二个参数为空。为了定位问题，然后在方法内部调用console.log()方法输出了第二个参数$(hide)，即console.log($(hide));。
经过调试问题就显现了，得到的最终结果如下图所示：
分析：
- 显而易见，传值为空的第二个参数，输出的
$(hide)居然不为空，而是输出了document元素。 - 按道理来说，
$("")应该是输出空才对呀，而且也不应该报错，毕竟代码是原封不动复制粘贴过来的，并没有进行改动。 - 这就奇怪了，为什么别人写的代码用起来就没问题，我按部就班的使用就出错了呢？这不应该呀，对此我自己也很无奈。
- 然后，我就在别人原先写的代码上进行了调试，同样是输出了
$("")，结果却出现了差异。
调试结果如下图所示：
分析：
- 很惊奇的发现，别人代码中的
$("")输出的是空，没错，而且我的用法也没错呀。 - 为什么我照搬过来的代码中的
$("")却输出了document元素？然后我就仔细对比了一下代码，终于被我发现了问题所在。
定位问题
原来是引用了不同的jQuery版本导致的，别人引用的版本是：
<script src="../../statics/system/jquery-1.8.3.js"></script>而我引用的版本是：
<script src="../../statics/system/jquery-1.3.2.js"></script>说明：
- 就这样一个小小的问题，困扰了我那么久，还一直找不出问题所在，我也实属无奈，好在问题被我发现了。
- 我在引入
jQuery时选择了一个低版本的，当时想的是为了更好的向老版本浏览器兼容。 - 现在想想完全没有必要，虽说没用最新版的
jQuery，但是也不能用太低版本的jQuery。
因为低版本会出现一些没有修复的bug，而这些bug出现的地方在我们没有遇到之前并不清楚。 - 所以说在引入
jQuery时也是要有一定的选择的，而不是随便拿来一个就用，这样很可能会给自己日后的开发留下一些隐患的。【大家应该在jQuery版本的选择这方面留意一些。】
对错误的调试结果的分析
为了确认低版本的jQuery对$("")的处理方式为$(document)，我做了如下图所示的操作：
分析
- 首先，
$(hide)输出了对应的jQuery对象。 - 其次，
$(hide)[0]将jQuery对象转化为了DOM对象，并进行输出。 - 然后，通过
DOM对象的nodeName属性，来得到当前对象的节点名称。
因为nodeName属性可依据节点的类型返回其名称。对于元素节点，将返回标签名；而对于属性节点，则返回属性名。 - 接着，对于
nodeType这个DOM属性，会返回指定节点的节点类型，并且是以数字的形式返回的。 - 至于其他的节点类型，大家可以查看下图，也可以点击此处查看
W3C中对Node Types的具体介绍：HTML DOM nodeType 属性 。
已知，总共存在 12 种不同的节点类型。
对常见的节点类型而言：对于元素节点，该属性将返回1；而对于属性节点，则该属性返回2。
由上图可知，nodeType的返回值为9，说明该DOM元素的节点类型为Document。
nodeType为1，即Element。//代表元素，
nodeTytpe为9，即Document。//代表整个文档，（DOM树的根节点）下图展示了不同的节点类型，nodeName和nodeType属性的不同返回值。
说明：根据nodeName属性的返回值也能判断出当前的节点类型。
nodeType为1，即Element。//nodeName返回元素名。
nodeTytpe为9，即Document。//nodeName返回#document。结束语
发现的问题：不同的jQuery版本对$("")的处理不同。
- 高版本的
jQuery会将$("")处理为空("")；
//jQuery v1.8.3 Date:2012-11-14
//对$("")的处理方式：init {}
→_proto_:Object(0)- 而低版本的
jQuery则将$("")处理为document对象。
/*jQuery v1.3.2 Date:2009-02-19
对$("")的处理方式：init [document, context: document]*/
→0:document
→context:documentlength:1
→_proto_:Object这篇关于Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
