jQuery在数组循环内获取元素CSS值时报getComputedStyle错误如何解决

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
该报错的核心原因是你使用了childNodes获取子节点：

• childNodes返回的是全类型节点集合，包含元素节点、文本节点、注释节点，你HTML中#waypoints标签内部的换行、空格都会被识别为文本节点，这类节点不属于Element类型
• 调用$(wayps).css("left")获取属性时，jQuery内部会调用getComputedStyle方法，要求传入参数必须为Element类型，传入文本节点就会触发报错
• 设置css属性时不报错是因为jQuery对设置操作做了容错处理，遇到非元素类型的节点会直接跳过操作，不会抛出异常

方案1：替换childNodes为children（推荐） #

children属性只会返回元素类型的子节点，自动过滤文本、注释等非元素节点，修改后代码如下：

const wayps = document.querySelector('#waypoints');
// 把childNodes替换为children
const children = wayps.children;
var x,y,canvas_x,canvas_y,px_x,px_y;
children.forEach(function(wayps) {
    x = $(wayps).css("left");
    x = parseInt(x)/2; // 补充：css返回带px后缀的字符串，需转成数字再计算避免出现NaN
    $(wayps).css("left" , x+"px");
});

方案2：保留childNodes，增加节点类型判断 #

如果需要保留childNodes遍历所有节点，可以在逻辑前增加节点类型校验，只处理元素节点：

const wayps = document.querySelector('#waypoints');
const children = wayps.childNodes;
var x,y,canvas_x,canvas_y,px_x,px_y;
children.forEach(function(wayps) {
    // nodeType为1代表是元素节点，非元素节点直接跳过
    if(wayps.nodeType !== 1) return;
    x = $(wayps).css("left");
    x = parseInt(x)/2;
    $(wayps).css("left" , x+"px");
});

内容的提问来源于stack exchange，提问作者Vagelis Vag Ov Oganesov