Skip to content

Instantly share code, notes, and snippets.

@ChillMouse
Created March 26, 2021 17:42
Show Gist options
  • Save ChillMouse/f48ed9dc60ca10dfe56ddab4f2dab8d7 to your computer and use it in GitHub Desktop.
Save ChillMouse/f48ed9dc60ca10dfe56ddab4f2dab8d7 to your computer and use it in GitHub Desktop.
"use strict";
window.addEventListener("load", function (){
let name = "iii"; // Имя
const TARGET_BOX = document.querySelector("#target"); // Блок, где будет логотип
let targetDot, k = 0; // Нужные переменные
name = name.split(""); // Разбиение строки на массив
name.forEach(el => {
if(el === "i")TARGET_BOX.innerHTML += `<div class="literal">${el}</div>`; // Вывод div с классом
else TARGET_BOX.innerHTML += `<div>${el}</div>`; // Вывод обычного div
console.log(el);
})
const TARGET_LIT = document.querySelectorAll(".literal"); // Получение всех div, где есть буква i
let el = "";
for(let j = 0; j < TARGET_LIT.length; j++){
el = TARGET_LIT[j];
console.log(TARGET_LIT[j].offsetTop + " x " + TARGET_LIT[j].offsetLeft);
console.log(TARGET_LIT[j].offsetWidth + " x " + TARGET_LIT[j].offsetHeight);
console.log(TARGET_LIT[j]);
TARGET_BOX.innerHTML += `<div class='fly-dot' style='top: ${TARGET_LIT[j].offsetTop + 8}px; left: ${TARGET_LIT[j].offsetLeft + 0.8}px'></div>`; // Создаёт точки по количеству букв i со стилями
}
document.querySelectorAll(".literal").forEach(el => {
console.log(el.offsetLeft);
document.querySelector("#target").innerHTML += `<div class='fly-dot' style='top: ${el.offsetTop + 8}px; left: ${el.offsetLeft + 0.8}px'></div>`;
});
console.log(document.querySelectorAll(".literal").forEach(el => {console.log(el.offsetLeft)}));
/*TARGET_LIT.forEach(el => {
console.log(el.offsetTop + " x " + el.offsetLeft);
console.log(el.offsetWidth + " x " + el.offsetHeight);
TARGET_BOX.innerHTML += `<div class='fly-dot' style='top: ${el.offsetTop + 8}px; left: ${el.offsetLeft + 0.8}px'></div>`; // Создаёт точки по количеству букв i со стилями
});*/
// document.querySelectorAll(".literal").forEach(el => {console.log(el.offsetLeft)});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment