如何選擇要應用變換（旋轉等）的元素？

Question

我正在嘗試旋轉或變換div中的所有元素，但目前具有此功能。 它將旋轉頁面上的所有元素。 如何選擇div或要旋轉的類？ Array.from(document.all).forEach(o => o.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)")

Answer 1

您需要使用document.getElementsByClassName()或document.getElementsByTagName() ：

var selected = document.getElementsByClassName('myClass');
Array.from(selected).forEach(o => o.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)")

Answer 2

function randomRotate(selector) {
  var elem = document.querySelector(selector);
  if (!elem) return;
  elem.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)"
}

randomRotate('.someClass');

基本上，它與您的代碼沒有相同之處，但是它不是通過選擇器來查找所有元素而是查找所有元素。 如果有多個具有此類的元素，它將僅對其第一個應用旋轉。

因此，如果要將旋轉應用於該類的所有對象，則應使用另一個函數：

function randomRotate(selector) {
  var elems = document.querySelectorAll(selector);
  if (elems.length === 0) return;
  elems.forEach(function(el){
    el.style.transform = "rotate(" + Math.floor(Math.random() * 27 - 12) + "deg)"
  })
}

randomRotate('.someClass')