如何使用 DOM 和 JavaScript 更改背景圖像

Question

---

大家好，我是一個從事小型項目的初學者，在該項目中我面臨與背景圖像相關的問題（如何使用 DOM 和 Javascript 更改背景圖像）。 我嘗試了幾種方法，但仍然存在問題。 我使用 JavaScript 函數 (random_image_picker(min,max)) 從 Image_gallery 中獲取隨機圖像。 一切都很順利，直到我單擊 background_theme btn 時，背景圖像應該被更改但無法正常工作。 每一個幫助將不勝感激。 感謝 HTML 標簽...

..背景圖片....

 <script> const image_gallery = ['https://img.playbuzz.com/image/upload/ar_1.5,c_pad,f_jpg,b_auto/q_auto:good,f_auto,fl_lossy,w_480,c_limit,dpr_1/cdn/2c2dd0ea-8dec-4d49-8a95-f7b18f0b7aed/df312655-1d96-457d-88f4-cfc93c580d1d_560_420.jpg', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwpR0X1hmpt4Kd2WviLXQGPrnUllW2UoLgtoWBoesgtFtSPFCF808bibJ8K2VhHRCki48&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxmLTuD78jeZaVR3I_xfIuvmE4tse_JuhGjQ&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxWrBodkwbTlxbMexeQCOneifPHaOUoTFwPA&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtQMwmsMjdYfF0W0cyMPX673aKVK3m8sSDjg&usqp=CAU'] function random_image_picker(min, max) { let a = Math.floor(Math.random() * (max - min + 1) + min); return image_gallery[a]; } let background_theme = document.querySelector('#background_theme'); let main = document.getElementsByTagName('main'); background_theme.addEventListener('click',function(){ main.style.backgroundImage = URL(random_image_picker(0,4)) }) </script>

Answer 1

BackgroundImage 應該是一個字符串

style.backgroundImage屬性接受一個字符串。 您可以使用模板字符串`url(${random_image_picker(0, 4)})`或使用常規 concat 來應用它，例如"url("+random_image_picker(0, 4)+")"

getElementsByTagName('main') 返回一個元素數組

當您使用getElementsByTagName時，您將收到一個數組。 如果只有 1 個元素可以應用背景圖像。 您可以使用 0 索引選擇第一個元素。 document.getElementsByTagName('main')[0];

 const image_gallery = ['https://img.playbuzz.com/image/upload/ar_1.5,c_pad,f_jpg,b_auto/q_auto:good,f_auto,fl_lossy,w_480,c_limit,dpr_1/cdn/2c2dd0ea-8dec-4d49-8a95-f7b18f0b7aed/df312655-1d96-457d-88f4-cfc93c580d1d_560_420.jpg', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwpR0X1hmpt4Kd2WviLXQGPrnUllW2UoLgtoWBoesgtFtSPFCF808bibJ8K2VhHRCki48&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxmLTuD78jeZaVR3I_xfIuvmE4tse_JuhGjQ&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxWrBodkwbTlxbMexeQCOneifPHaOUoTFwPA&usqp=CAU', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtQMwmsMjdYfF0W0cyMPX673aKVK3m8sSDjg&usqp=CAU' ] function random_image_picker(min, max) { let a = Math.floor(Math.random() * (max - min + 1) + min); return image_gallery[a]; } let background_theme = document.querySelector('#background_theme'); let main = document.getElementsByTagName('main')[0]; background_theme.addEventListener('click', function() { main.style.backgroundImage = `url(${random_image_picker(0, 4)})` })

 main { width: 400px; height: 400px; border: 2px solid lime; }

 <main> <button id="background_theme">swap theme</button> </main>