JavaScript是一種廣泛使用的編程語言，在編寫時可以通過修改HTML元素的樣式來改變頁面的展示效果。其中，修改display屬性是一個常見的操作。

display屬性可以控制元素在頁面中的顯示方式，常用的屬性值有block、inline、inline-block、none等。比如，當我們想在頁面中隱藏一個元素時，可以將其display屬性設置為none：

const element = document.getElementById('hidden-element');
element.style.display = 'none';

這段代碼中，getElementById()方法獲取了ID為'hidden-element'的元素，然后通過style.display屬性將其display屬性設置為'none'，從而讓該元素在頁面中隱藏。

除了隱藏元素，我們還可以通過修改display屬性來調整同一頁面元素的布局。以改變元素的尺寸和位置為例，可以將display屬性設置為inline-block，并通過修改element.style.width和element.style.height等屬性來達到目的：

const element = document.getElementById('resizable-element');
element.style.display = 'inline-block';
element.style.width = '100px';
element.style.height = '80px';

在這個例子中，getElementById()方法獲取了ID為'resizable-element'的元素，并將其display屬性設置為inline-block。然后，將其寬度和高度分別設置為100px和80px，從而實現了大小上的調整。

需要注意的是，display屬性的修改可能會對元素的展示效果造成意想不到的影響。比如，將display屬性設置為inline后，元素會變成行內元素，而其寬度和高度屬性將不再起作用。這時，可以通過設置style.width為auto來讓元素自適應瀏覽器窗口的寬度。

const element = document.getElementById('inline-element');
element.style.display = 'inline';
element.style.width = 'auto';
element.style.height = '50px';

通過以上的代碼，我們成功地將ID為'inline-element'的元素設置為行內元素，并將其高度設置為50px，同時讓其寬度自適應。

總之，通過修改display屬性，我們可以靈活的控制頁面中元素的顯示效果，從而達到更好的用戶體驗效果。