Создавайте элементы с абсолютным позиционированием, но избегайте текста - PullRequest
Новая
       52

Создавайте элементы с абсолютным позиционированием, но избегайте текста

0 голосов
/ 17 октября 2019

Мне нужно динамически создавать элементы (точки), которые будут украшением страницы, но эти элементы не могут накладываться на текст (или другие элементы с определенным классом / идентификатором и т. Д.). Каков наилучший подход для создания таких элементов?

На данный момент я могу легко создавать точки и добавлять их на страницу: 

  const possiblePosition = [8.33, 16.66, 25, 33.33, 41.65, 49.98, 58.31, 66.64, 74.97, 83.33, 91.63]
  const dotsNumber = 10;

  function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function generateXY() {
    const coords = []
    for (var i = 0; i < dotsNumber; i++) {
      let randomX = possiblePosition[getRandomArbitrary(0, possiblePosition.length)]
      let randomY = possiblePosition[getRandomArbitrary(0, possiblePosition.length)]
      coords.push([randomX, randomY])
    }
    return coords
  }

  function createDots() {
    const coords = generateXY()
    for (let i = 0; i < dotsNumber; i++) {
      const dot = document.createElement("span")
      dot.classList.add("circle-dot");
      dot.style.position = "absolute";
      dot.style.top = coords[i][0] + "vw";
      dot.style.left = coords[i][1] + "vw";
      document.body.appendChild(dot)
    }
  }

Конечно, теперь показ в случайном положении, и я ищу способ проверить, есть личто-то под потенциальным положением точки.

...