JavaScript是一種非常強大的編程語言，可以實現動態效果，特別是當它涉及到設置寬高時，它的實用性更顯著。
HTML元素的寬度和高度被定義為CSS屬性，但JavaScript允許我們動態設置它們。下面是一些常見的設置HTML元素寬高的JavaScript方法：
1.使用style對象動態設置寬高：要設置元素的寬高，可以使用style對象。style對象是元素的CSS屬性的一個集合，您可以在其中編寫內聯CSS。下面是使用style對象設置元素寬高的示例：

<code>
const element = document.querySelector('.my-element');
element.style.width = '200px';
element.style.height = '100px';
</code>

在這個例子中，我們選擇了一個名為“.my-element”的元素，然后使用style對象修改元素的寬度和高度。
2.使用元素對象動態設置寬高：您還可以使用元素對象本身來動態設置其寬高。下面是一個示例：

<code>
const element = document.querySelector('.my-element');
element.width = 200;
element.height = 100;
</code>

在這個示例中，我們選擇了一個名為“.my-element”的元素，然后使用元素對象本身修改元素的寬度和高度屬性。
3.使用CSS的calc()函數設置寬高：如果您需要設置元素的寬高與另一個元素的寬高相關，則可以使用CSS的calc()函數。下面是一個使用calc()函數設置寬高的示例：

<code>
const element = document.querySelector('.my-element');
const parentElement = element.parentElement;
const parentWidth = parentElement.offsetWidth;
<br>
    element.style.width = <code>calc(${parentWidth}px / 2)</code>;
element.style.height = <code>calc(${parentWidth}px / 2)</code>;
</code>

在本例中，我們選擇了一個名為“.my-element”的元素，并使用其父元素的寬度設置元素的寬高。
在實際應用中，您可能需要通過JavaScript動態設置元素的寬高來滿足特定的需求。無論您選擇哪種方法，現在您已經了解了幾種實現方法，并且可以開始使用它們。
來看另一個例子，假設我們有一個圖片庫，并且我們想在用戶點擊時顯示所點擊圖片的信息，該怎么辦呢？我們可以為每個圖像創建一個事件監聽器，并以另一種方法從單個函數中處理所有事件。以下是代碼示例：

<code>
const gallery = document.querySelector('.gallery');
const imageInfo = document.querySelector('.image-info');
const images = gallery.querySelectorAll('.image');
<br>
    images.forEach(image => {
image.addEventListener('click', event => {
const clickedImage = event.currentTarget;
const clickedImageSrc = clickedImage.src;
const clickedImageAlt = clickedImage.alt;
<br>
        imageInfo.innerHTML =<code>
<p>${clickedImageAlt}</p></code>;
});
});
</code>

在這個例子中，我們獲取元素容器對象“gallery”，然后找到其中所有的圖像元素。每個圖像都附加了一個“click”事件監聽器，該監聽器使用當前事件的目標元素（即當前點擊的圖像）的各種屬性（例如src和alt）更新信息容器。由于我們沒有為每個圖像創建一個單獨的事件監聽器，因此我們能夠將復雜的代碼塊分解為可重用的代碼。這是一種非常實用的技術，您應該始終牢記。
現在，您已經學會了如何使用JavaScript設置HTML元素的寬高。通過使用這些技術，您可以動態地修改和控制HTML頁面中元素的寬度和高度，為用戶提供更好的體驗。