Javascript 如何知道呈现哪个div以及如何获取div的子元素？

这里有6个孩子的div。现在我的要求是知道立方体的哪一侧被显示

我已尝试查找div是否在视图端口中。如果它在视图端口中，那么我将使用childElementCount获取该div的子元素。但最后没有回答

\u roll（）{
var cube=this.\u root.getElementById（'cube'）；
var min=1；
var max=24；
var xRand=该值。\u getRandom（最大值，最小值）；
var yRand=该值。\u getRandom（最大值，最小值）；
cube.style.webkitttransform='rotateX（'+xRand+'deg）rotateY（'+yRand+'deg）'；
cube.style.transform='rotateX（'+xRand+'deg）rotateY（'+yRand+'deg）'；
}

.container{
宽度：150px；
高度：150像素；
位置：相对位置；
保证金：0自动40px；
透视图：1000px；
透视原点：50%100%
}
#立方体{
宽度：100%；
身高：100%；
顶部：100px；
位置：绝对位置；
变换样式：保留-3d；
转变：转变6s；
}
#立方体：悬停{
光标：指针；
}
#立方体div{
背景：#aa0000；
显示：块；
位置：绝对位置；
宽度：150px；
高度：55px；
填充：48px 0px；
}
#立方体，前面{
变换：translateZ（75px）；
}
#立方体，回来{
变换：rotateX（-180度）translateZ（75px）；
}
#立方体，对{
变换：旋转（90度）平移（75像素）；
}
#立方体，左边{
变换：旋转（-90度）平移Z（75像素）；
}
#立方体，顶部{
变换：rotateX（90度）translateZ（75像素）；
}
#立方体，底部{
变换：rotateX（-90度）translateZ（75px）；
}
多特先生{
显示：块；
位置：绝对位置；
宽度：25px；
高度：25px；
背景：#fff；
边界半径：15px；
}
.front.dot1{
顶部：62px；
左：62px；
}
.back.dot1{
顶部：12px；
左：12px；
}
.back.dot2{
顶部：112px；
左：108px；
}
.对{
顶部：12px；
左：12px；
}
.对{
顶部：62px；
左：62px；
}
.对{
顶部：112px；
左：108px；
}

---

我认为给你一个直截了当的回答是很复杂的，因为一开始你应该滚到一张特定的脸上，而不是一定的程度

无论如何，我能想到的唯一一件事就是每次单击都将度重置回基准。然后你可以创建一个常量数组来保存每个面的位置（deg），然后你可以得到一个随机数作为数组的关键点

const arr = {'front' : [1260, 90], 'back' : [1350, 720] ... } ;
var rand = getRandFace();//'front' or 'back' ...;
//then you apply the values from `arr[rand]`.
cube.style.transform = 'rotateX(' + arr[rand][0] + 'deg) rotateY(' + arr[rand][1]+ 'deg)';

在下一次单击时，您可以将立方体度数放回原位（现在为1），但您应该在没有动画的情况下执行位置重置。 很抱歉但我认为你需要重写它

---

有一种方法可以在执行此操作时实现它，但它非常复杂。

首先更正JavaScript中的语法错误。将类的长度（

.dot

）获取为

$（'.container.dot'）.length（）

或

document.queryselectoral（'.container.dot'）.length也解决你的问题，你想要什么还不太清楚。@Sinto，我不认为使用jquery是一个选项，因为OP只标记了javascript。@KrishnaPrashatt那么OP可以使用Sinto评论的非查询部分。谢谢@Avi fatal，我的要求通过你的方法得到了满足。