Изменение высоты и ширины элемента с помощью JavaScript

На чтение1 мин

Обновлено1 месяц назад

Просмотров

Чтобы изменить высоту и ширину элемента с помощью JavaScript, вы можете напрямую управлять свойством style элемента. Вот простое руководство о том, как это сделать:

Пример:

HTML <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Change Height and Width</title><style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid #000;
        }
    </style>
</head>
<body>

    <div id="myElement"></div><button onclick="changeSize()">Change Size</button>

    <script>
        function changeSize() {
            // Get the element by its IDvar element = document.getElementById('myElement');

            // Change the width and height
            element.style.width = '200px'; // New width
            element.style.height = '200px'; // New height
        }
    </script>

</body>
</html>

Вывод:

Screenshot-2024-11-15-163136

Screenshot-2024-11-15-163144

Объяснение:

document.getElementById('myElement'): Это позволяет получить элемент с идентификатором myElement.element.style.ширина = '200 пикселей': Это устанавливает ширину элемента равной 200 пикселям.element.style.height = '200 пикселей': При этом высота элемента устанавливается равной 200 пикселям.

Важные примечания:

Вы можете указать размеры, используя любые допустимые единицы измерения CSS, такие как px, %, em, rem и т.д.Свойство style напрямую изменяет встроенный стиль элемента, поэтому, если вы установите его, оно переопределит все предыдущие настройки CSS для этого свойства.

Такой подход позволяет динамически изменять размеры элемента в ответ на действия пользователя, такие как нажатие кнопки

#JavaScript