欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-19 10:45:35
...

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'.

具体错误如下图所示:
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));

经过调试问题就显现了,得到的最终结果如下图所示:

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

分析:

  • 显而易见,传值为空的第二个参数,输出的$(hide)居然不为空,而是输出了document元素。
  • 按道理来说,$("")应该是输出空才对呀,而且也不应该报错,毕竟代码是原封不动复制粘贴过来的,并没有进行改动。
  • 这就奇怪了,为什么别人写的代码用起来就没问题,我按部就班的使用就出错了呢?这不应该呀,对此我自己也很无奈。
  • 然后,我就在别人原先写的代码上进行了调试,同样是输出了$("")结果却出现了差异

调试结果如下图所示:

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

分析:

  • 很惊奇的发现,别人代码中的$("")输出的是空,没错,而且我的用法也没错呀。
  • 为什么我照搬过来的代码中的$("")却输出了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版本的选择这方面留意一些。】
对错误的调试结果的分析

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

为了确认低版本的jQuery$("")的处理方式为$(document),我做了如下图所示的操作:

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

分析

  • 首先,$(hide)输出了对应的jQuery对象。
  • 其次,$(hide)[0]jQuery对象转化为了DOM对象,并进行输出。
  • 然后,通过DOM对象的nodeName属性,来得到当前对象的节点名称。
    因为nodeName属性可依据节点的类型返回其名称。对于元素节点,将返回标签名;而对于属性节点,则返回属性名。
  • 接着,对于nodeType这个DOM属性,会返回指定节点的节点类型,并且是以数字的形式返回的。
  • 至于其他的节点类型,大家可以查看下图,也可以点击此处查看W3C中对Node Types的具体介绍:HTML DOM nodeType 属性

已知,总共存在 12 种不同的节点类型。
对常见的节点类型而言:对于元素节点,该属性将返回1;而对于属性节点,则该属性返回2

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

由上图可知,nodeType的返回值为9,说明该DOM元素的节点类型为Document

nodeType1,即Element。//代表元素,
nodeTytpe为9,即Document。//代表整个文档,(DOM树的根节点)

下图展示了不同的节点类型,nodeNamenodeType属性的不同返回值。

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

说明:根据nodeName属性的返回值也能判断出当前的节点类型。

nodeType1,即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:documentcontext:document
    length:1
→_proto_:Object