JavaScript

Как создать квадрат через JavaScript?

Нужно именно только через JavaScript. Без использования html. Через JavaScript весь код от начала до конца.
Игорь Томилин
Игорь Томилин
55
Наверняка то же самое задание из цикла трех, где поле с заголовком, кнопка с цифрой и квадрат, меняющийся в круг. Уже отвечал и за все эти ответы вывел идеальный вариант.
 const body = document.querySelector('body');

const square = document.createElement('div');



square.style.background = '#252585';

square.style.width = '100px';

square.style.height = '100px';



body.append(square);



square.addEventListener('click', ({target}) => { 

   let radius = parseInt(getComputedStyle(target).borderRadius); 

   target.style.borderRadius = (radius === 0) ? '50%' : '0'; 

})
IH
Ikbol_Jon Hurulbayev
77 311
Лучший ответ
Даже если только на Javascript, без HTML, то для отрисовки фигуры на странице всё равно нужно создавать узлы DOM-дерева и придется генерировать HTML из JS.
Вот тут скрипт сделал даже поинтереснее, он тебе не просто квадрат рисует, а еще по шмяканью по нему мышкой превращает его в круг и обратно в квадрат при следующем клике (что как оказалось и требуется в задании судя по комментарию)
 let div = document.createElement('div');  

	div.style.width = '100px';  

	div.style.height = '100px';  

	div.style.backgroundColor = 'red';  

	document.body.appendChild(div);  

	let test = true;  

	div.onclick = function() {  

		if (test) {  

			this.style.borderRadius = '50%';  

			test = false;  

		} else {  

			this.style.borderRadius = '0%'  

			test = true;  

		}  

	}
Андрей Кубышта
Андрей Кубышта
67 756
А как ты это рендерить будешь? Я Могу предложить тебе создание квадрата на canvas, 1 строчка html, других вариантов не знаю, может там использовать какие нибудь игровые движки?\
ВГ
Вячеслав Григорьев
138
Игорь Томилин Всё уже поняла. Вот так:

const block = document.createElement('div');
const style = document.createElement('style');
const cls = '.square { width: 500px; height: 500px; background: red; }\n.square.active { border-radius: 50%; }';

block.className = 'square';

style.append(cls);
document.head.append(style);
document.body.append(block);

block.addEventListener('click', (event) => {
event.target .classList.toggle('active');
})

Мне там ещё надо было, чтобы квадрат при нажатии превращался в круг.

Похожие вопросы