JAVASCRIPT 代碼為：
img1Click = document.querySelector('img#img1')
selected = document.querySelector('section.selected')
img = document.querySelector('img#imgcon')
img1Click.addEventListener('click', () =>{
console.log('clicked')
document.getElementById('imgcon').src('images/yellowcake.jpg')
})
當單擊另一個影像時，此代碼應該更改 div 的 img 的 src。
uj5u.com熱心網友回復：
你幾乎擁有它，雖然src不是一個功能！
你可以通過做設定它image.src = ...或image.setAttribute('src', '...')
這是一個簡化的示例：
const image = document.querySelector("img");
image.addEventListener("click", () => {
image.setAttribute("src", "https://picsum.photos/id/2/200/200")
})<img src="https://picsum.photos/id/1/200/200" alt="">uj5u.com熱心網友回復：
是的，你可以編程
document.getElementById('id_of_element').src = 'image'
其中 image 是 base64 字串或目錄中的檔案路徑 (x.png)。
uj5u.com熱心網友回復：
const imgA = document.querySelector('#imgA');
const imgB = document.querySelector('#imgB');
imgA.addEventListener('click', () => imgB.src = imgA.src);
imgB.addEventListener('click', () => imgA.src = imgB.src);<div>
<img id='imgA' src="https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=64"/>
<img id='imgB' src="https://lh3.googleusercontent.com/-ugd4YTD60WY/AAAAAAAAAAI/AAAAAAAAAAA/AMZuuclfd8tK4TmHmCGTFZSkqc8VSPTITA/s96-c/photo.jpg?sz=64"/>
</div>uj5u.com熱心網友回復：
你可以用語法來做到這一點：document.getElementById('imgcon').src = "images/yellowcake.jpg"
img1Click = document.querySelector('img#img1')
selected = document.querySelector('section.selected')
img = document.querySelector('img#imgcon')
img1Click.addEventListener('click', () =>{
console.log('clicked')
document.getElementById('imgcon').src = 'https://www.thespruceeats.com/thmb/y9Sj9blj6uM14YUdM6FlZv2dhEI=/2667x2000/smart/filters:no_upscale()/piece-of-yellow-cake-with-vanilla-frosting-186880544-57eade013df78c690fe89768.jpg'
})img {
width: 400px;
height: auto;
}<img id="img1" src="https://douongcaocap.vn/wp-content/uploads/2015/08/click-here-button.png" >
<img id="imgcon" src="https://www.recipetineats.com/wp-content/uploads/2018/03/Chocolate-Cake_9-SQ.jpg">轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/480274.html
標籤：javascript html 图片 源代码
上一篇：設備移動時如何更改元素的順序