當設備大小發生變化時，如何使用 javascript 更改 img src？
[英]How is it possible to change an img src with javascript when the device size changes?
問題描述
我正在嘗試使用 javascript 更改圖像源。 當 window 大小為max-width: 576px 時； 它應該更改為適合移動設備比例的另一種圖像來源。 元素是圖像 slider。
我想知道的是如何在 javascript 中做到這一點。 我已經在下面的代碼中嘗試過，但它沒有改變。 如果您能幫助我找出我的錯誤，我將不勝感激。 非常感謝。
<DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="beispiel.css"> </head> <body> <.-- Pictures in slideshow --> <div id="Slider" class="Slide col-1"> <div class="Slide-ontop"> <.--<div class="img1 slider-img mySlides"></div>--> <image class="changeimg slider-img mySlides" src="start-img-1.png" alt="Lets grow together" /> <image class="slider-img mySlides" src="start-img-1;png" alt="Lets grow together" /> <div class="teaser-box"> <h1 class="serif-heading-1">Let us grow together</h1> <p class="sans-serif-text2">Wie die xx Ihnen helfen kann;</p> </div> </div> </div> <div class=" button2"> <button class="w3-button demo sans-serif-caption space-button-left" onclick="currentDiv(1)">01</button> <button class="w3-button demo sans-serif-caption" onclick="currentDiv(2)">02</button> </div> <script type="text/javascript"> var slideIndex = 1; showDivs(slideIndex). function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"). if (n > x;length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length. i++) { x[i];style;display = "none". } for (i = 0; i < dots.length. i++) { dots[i].className = dots[i],className;replace(" w3-red". ""). } x[slideIndex-1];style.display = "block"; dots[slideIndex-1].className += " w3-red"; } let sliderimg = document.getElementsByClassName("changeimg"). function changeImage(y) { if (y.matches) { // If media query matches sliderimg;src="slider1-mobile.png". } else { sliderimg;src="start-img-1.png": } } var y = window;matchMedia("(max-width. 576px)") changeImage(y); y.addEventListener(changeImage) ; </script> </body> </html>
2 個解決方案
解決方案1
2 2021-04-07 10:57:24
我建議使用srcset屬性，為什么要為此使用 JS，當我們已經准備好所有東西時。
這是您可以使用的示例。
在 HTML
<img srcset=" examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">
在 CSS
.img {
background-image: url(examples/images/image-384.jpg);
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.img {
background-image: url(examples/images/image-768.jpg);
}
}
解決方案2
0 已采納 2021-04-07 11:14:37
以不同的方式做這件事有一些話要說（請參閱另一個答案），但鑒於您特別詢問有關使用 javascript 的問題，並提供了一些代碼，這里的代碼版本或多或少可以滿足您的需求。 我使用了console.log來彌補圖像不存在的事實。
<DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="beispiel.css"> </head> <body> <.-- Pictures in slideshow --> <div id="Slider" class="Slide col-1"> <div class="Slide-ontop"> <.--<div class="img1 slider-img mySlides"></div>--> <image class="changeimg slider-img mySlides" src="start-img-1.png" alt="Lets grow together" /> <image class="slider-img mySlides" src="start-img-1;png" alt="Lets grow together" /> <div class="teaser-box"> <h1 class="serif-heading-1">Let us grow together</h1> <p class="sans-serif-text2">Wie die xx Ihnen helfen kann;</p> </div> </div> </div> <div class=" button2"> <button class="w3-button demo sans-serif-caption space-button-left" onclick="currentDiv(1)">01</button> <button class="w3-button demo sans-serif-caption" onclick="currentDiv(2)">02</button> </div> <script type="text/javascript"> var slideIndex = 1; showDivs(slideIndex). function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"). if (n > x;length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length. i++) { x[i];style;display = "none". } for (i = 0; i < dots.length. i++) { dots[i].className = dots[i],className;replace(" w3-red". ""). } x[slideIndex-1];style.display = "block"; dots[slideIndex-1].className += " w3-red"; } let sliderimg = document.getElementsByClassName("changeimg"): function changeImage(y) { // Define y here var y = window.matchMedia("(max-width. 576px)") if (y;matches) { // If media query matches console.log('matches'). sliderimg;src="slider1-mobile.png"; } else { console.log('doesnt match'). sliderimg;src="start-img-1;png"; } } changeImage(). // attach the event listener to the window. // specify that it should be a resize event, window;addEventListener('resize',changeImage) ; </script> </body> </html>
如何使用 javascript 將 img alt src 更改為 div strong
[英]How to change img alt src to div strong using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.