Question

这是我想要实现的目标：我有一个中心圆div，其中包含5个其他div。当我在伽马轴上旋转设备时，我希望圆形div相应地旋转到伽玛度，但是5个内部div在反方向上旋转（有点像内部div实际上没有旋转的幻觉，有点像摩天轮效应）。我写了这段代码：

document.addEventListener("DOMContentLoaded",onload); 

function onload(){

    if (window.DeviceOrientationEvent) {
        console.log("DeviceOrientation is supported");
        window.addEventListener('deviceorientation', function(eventData){
            var tiltLR = eventData.gamma;
            deviceOrientationHandler(tiltLR);
        }, false);
    } else {
        console.log("DeviceOrientation NOT supported");
    }
}

var lastTilt = 0;

function deviceOrientationHandler(tiltLR) {
    var circle = document.getElementById('center-circle');
    var str = window.getComputedStyle(circle, null);
    var trans = str.getPropertyValue("-webkit-transform");
    var tr_values = trans.split('(')[1],
        tr_values = tr_values.split(')')[0],
        tr_values = tr_values.split(',');
    circle.style.webkitTransform = "translate("+tr_values[4]+"px, "+tr_values[5]+"px) rotate("+ tiltLR +"deg)"


    var icons = document.getElementsByClassName('icon-circle');
    tiltLR = Math.abs(tiltLR);
    for (var i = 0; i <= icons.length; i++){
        var el = icons[i];
        var st = window.getComputedStyle(el, null);
        var tr = st.getPropertyValue("-webkit-transform");
        var values = tr.split('(')[1],
            values = values.split(')')[0],
            values = values.split(',');
        if (tiltLR > lastTilt) {
            icons[i].style.webkitTransform = "translate("+values[4]+"px, "+values[5]+"px) rotate(-"+ tiltLR +"deg)";
        } else {
            icons[i].style.webkitTransform = "translate("+values[4]+"px, "+values[5]+"px) rotate("+ tiltLR +"deg)";
        }
        console.log("el"+i+": "+tr+" | vals: "+values);
    }

    lastTilt = tiltLR;
}

问题出在for循环内 - 当代码到达此行var st = window.getComputedStyle(el, null);时，我收到以下错误消息：Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'。我尝试将el var更改为icons[i].id，但没有帮助。

任何想法为什么会发生以及如何解决它？

Answer 1

正如@Juhana在评论中提到的那样，你的上一个循环将失败，因为没有元素var el = icons[i]; // where i=icons.length

因此将你的循环改为

for (var i = 0; i < icons.length; i++){//change <= to <

它应该有用。

未捕获的TypeError：无法在'Window'上执行'getComputedStyle'：参数1不是'Element'类型

1 个答案: