HTML 動(dòng)態(tài)設(shè)置寬度 在 HTML 中我們可以使用 CSS 來(lái)定義元素的寬度，例如：

p {
width: 500px;
}

這樣將會(huì)使所有的<p>元素的寬度為 500 像素。但是，當(dāng)我們需要?jiǎng)討B(tài)地設(shè)置元素的寬度時(shí)，該怎么辦呢？ 這種情況下，我們可以使用 JavaScript 來(lái)改變?cè)貥邮健Ｅe個(gè)例子，我們要使用 JavaScript 設(shè)置某個(gè)<p>元素的寬度為屏幕寬度的一半：

p {
width: 50%;
}

現(xiàn)在我們來(lái)看一下 JavaScript 代碼：

const paragraph = document.querySelector('p');
const width = window.innerWidth;
paragraph.style.width = width / 2 + 'px';

首先，我們使用querySelector()方法獲取了第一個(gè)<p>元素。然后，我們使用window.innerWidth屬性獲取了屏幕的寬度。 最后，我們使用style.width來(lái)設(shè)置元素的寬度，帶上像素單位。這樣就能動(dòng)態(tài)設(shè)置<p>元素的寬度為屏幕寬度的一半了。 這只是一個(gè)簡(jiǎn)單的例子，JavaScript 可以做更多的事情來(lái)動(dòng)態(tài)設(shè)置元素樣式。不過(guò)，我們要記住盡量避免頻繁地改變?cè)貥邮剑驗(yàn)檫@會(huì)影響頁(yè)面性能。