JavaScript | Как создать HTML-элемент DIV фиксированного размера в пикселях?

Когда мы переходим на уровень языка программирования JavaScript с уровня HTML, то все манипуляции для динамического формирования разметки ложатся на знание прикладных интерфейсов программирования и их объекты (классы объектов).

Многие начинающие разработчики приходят к JavaScript из обычной вёрстки HTML. Это значит, что они уже касались стандарта, который отвечает за стилевое оформление элементов на странице браузера. Я говорю про CSS.

Так вот HTML, CSS и JavaScript имеют свои собственные синтаксисы для написания выражений и языковых конструкций. Но именно язык программирования стоит выделять отдельно от первых двух. JavaScript просто работает с абстракциями, которые описывают элементы из HTML и CSS. Эти абстракции живут в браузере и расширяют набор свойств глобального объекта JavaScript, коим на клиенте является объект window.

JavaScript код для создания одного HTML-элемента DIV, красного цвета, прямоугольной формы, размером 300 на 600 пикселей и помещением его в качестве первого ребёнка элемента BODY

let d = document.createElement('div');
d.style.backgroundColor = 'red';
d.style.height = '300px';
d.style.width = '600px';
document.body.prepend(d);

В нашем случае всё стилевое оформление нового HTML-элемента DIV доступно у объекта — экземпляра класса CSSStyleDeclaration.

Важно отметить, что все три свойства являются геттерами и сеттерами. То есть они влияют на другие свойства объекта, а не только на значение своего ключа.

Объект класса CSSStyleDeclaration с тремя установленными свойствами - JavaScript — Объект класса CSSStyleDeclaration с тремя установленными свойствами — JavaScript

Мы задаём цвет при помощи ключа «backgroundColor«. В качестве значения свойства объекта мы передаём строку ‘red‘. Важно отметить, что строка «backgroundColor» — это DOMstring, которая обозначает поведение CSS свойства «background-color» по стандарту организации «w3c«.

Простыми словами, когда мы работаем с объектами в JavaScript, то у нас используется строка «backgroundColor«, а когда мы работаем с CSS, тогда мы используем строку «background-color», написанную через дефис. Всё дело в разных синтаксисах языков. В JavaScript нельзя использовать дефисы в названиях ключей свойств объектов — это будет синтаксическая ошибка. Именно поэтому слова склеены воедино, а логическое разделение осуществляется заглавной буквой.

В JavaScript нельзя использовать дефисы в названиях ключей свойств объектов

Ключ «height» отвечает за высоту элемента. Устанавливаем значение в виде строки ‘300px‘. Обратите внимание, что мы обязательно передаём строковый тип данных вида DOMstring, который включает символы «px» на конце. Только так мы укажем стилевое оформление размеров блока в пикселях. Без них блок не отрисуется в фиксированном размере. Просто писать «300» нельзя.

И ещё раз нужно проговорить важный момент, что экземпляр класса CSSStyleDeclaration имеет свойство с ключом «height» — это DOMstring, которая обозначает поведение CSS свойства «height» по стандарту организации «w3c«. В этом случае строковые названия одинаковы для разных синтаксисов.

Ключ «width» отвечает за ширину элемента. Устанавливаем значение в виде строки ‘600px‘. Тут аналогично — ключ «width» обозначает поведение CSS свойства «width» по стандарту организации «w3c«. В этом случае строковые названия также одинаковы для разных синтаксисов.

Для создания HTML-элемента DIV силами JavaScript мы используем объектную модель документа (DOM) и её метод createElement(). Вызов метода мы осуществляем на объекте с именем «document«.

Для связи текущего объекта документа и отрисовки нового объекта на странице мы используем метод установления наследования — prepend(). Так мы вставим новый HTML-элемент самым первым ребёнком элемента BODY.

Итоговый вид страницы с разметкой:

Создали HTML-элемент DIV фиксированного размера силами JavaScript

В результате на странице успешно отрисовывается красный горизонтальный прямоугольник фиксированного размера. Задача решена.

Полный код HTML-разметки

<!DOCTYPE html>

<head>

<title>Создание DIV через JavaScript</title>

</head>

<body>

let d = document.createElement(‘div’);

d.style.backgroundColor = ‘red’;

d.style.height = ‘300px’;

d.style.width = ‘600px’;

document.body.prepend(d);

</script>

</body>

</html>

Информационные ссылки

Стандарт HTML — https://html.spec.whatwg.org/multipage/

Стандарт DOM — https://dom.spec.whatwg.org/

Стандарт Document Object Model (DOM) Level 2 Style Specification — https://www.w3.org/TR/DOM-Level-2-Style/

Стандарт CSS Backgrounds and Borders Module Level 3 — https://www.w3.org/TR/css-backgrounds-3/

Стандарт CSS Box Sizing Module Level 3 — https://www.w3.org/TR/css-sizing-3/