Question

我一直在研究这一天。通过一系列ID循环无效。 queryAllSelectors不起作用。在这两种情况下，只有三个div中的第三个受到影响。我很想让ByClassName工作。

<header>
    <div onmouseover="rotateYDIV()" class="rotate3D">Thing A</div>
    <div onmouseover="rotateYDIV()" class="rotate3D">Thing B</div>
    <div onmouseover="rotateYDIV()" class="rotate3D">Thing C</div>
</header>

header {
    text-align: center;
}

div {
    width: 100px;
    height: 100px;
    background: gray;
    display: inline-block;
}



var y,n=0,ny=0,rotINT,rotYINT

function rotateYDIV()
{
    y=document.getElementsByClassName("rotate3D");
    clearInterval(rotYINT)
    rotYINT=setInterval("startYRotate()",1)
}

function startYRotate()
{
    ny=ny+1
    y.style.transform="rotateY(" + ny + "deg)"
    y.style.webkitTransform="rotateY(" + ny + "deg)"
    y.style.OTransform="rotateY(" + ny + "deg)"
    y.style.MozTransform="rotateY(" + ny + "deg)"
    if (ny==180 || ny>=360)
        {
        clearInterval(rotYINT)
        if (ny>=360){ny=0}
    }
}

Answer 1

getElementByClassName返回一个数组。你必须遍历它的元素。

function startYRotate()
{
    ny=ny+1
    for(var i = 0; i < y.length; i++)
    {


        y[i].style.transform="rotateY(" + ny + "deg)"
        y[i].style.webkitTransform="rotateY(" + ny + "deg)"
        y[i].style.OTransform="rotateY(" + ny + "deg)"
        y[i].style.MozTransform="rotateY(" + ny + "deg)"
        if (ny==180 || ny>=360)
            {
            clearInterval(rotYINT)
            if (ny>=360){ny=0}
        }
    }
}

getElementByClassName不能与rotateY一起使用

1 个答案: