如何在 Java Script 中根据屏幕大小替换图像 src

问题描述

我正在 Java Script 的帮助下更改我的背景图片，并且我有桌面版图片和移动版图片。

当屏幕尺寸缩小到 600px 以下时，我希望我的桌面版图片应该替换为移动版图片。

有人可以帮我解决这个问题，下面是代码片段。

const hbg = document.querySelector('.hbg');
const closeBtn = document.querySelector('.close');

hbg.addEventListener('click',()=>{
    document.querySelector('.nav').parentNode.classList.add('active');
})

closeBtn.addEventListener('click',()=>{
    document.querySelector('.nav').parentNode.classList.remove('active');
})

const data = [
    {
        image: "images/desktop-image-hero-1.jpg",header: "discover innovative ways to decorate",},{
        image: "images/desktop-image-hero-2.jpg",header: "We are available all across the globe",{
        image: "images/desktop-image-hero-3.jpg",header: "Manufactured with the best materials",}
]

let currentPage = 0;

const slide = () => {
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    const page = document.querySelector('.main-page');
    const header = document.querySelector('.header');

    const updateContent = () => {
        page.style.backgroundImage = `url(${data[currentPage].image})`;
        header.innerHTML = data[currentPage].header;
    }

    next.addEventListener('click',() => {
        currentPage++;
        if(currentPage > data.length-1){
            currentPage = 0;
        }
        updateContent();
    })

    prev.addEventListener('click',() => {
        currentPage--;
        if(currentPage < 0 ){
            currentPage = data.length - 1;
        }
        updateContent();
    })
};

slide();

解决方法

您可以使用这样的对象结构。

const data = {
    'desktop' : [
    {
        image: "images/desktop-image-hero-1.jpg",header: "Discover innovative ways to decorate",},{
        image: "images/desktop-image-hero-2.jpg",header: "We are available all across the globe",{
        image: "images/desktop-image-hero-3.jpg",header: "Manufactured with the best materials",}],'tablet' : [
    {
        image: "images/desktop-image-hero-1.jpg",'mobile' : [
    {
        image: "images/desktop-image-hero-1.jpg",}]
}

您要查找的事件是“onresize”。检查您的条件并重新分配图像。

如果你不想处理调整大小，你可以简单地

 const updateContent = () => {
if(window.innerWidth <360){

}
else if(window.innerWidth <786){


}
else if()

....
    }

但我建议使用媒体查询并从那里添加图像，除非您只想要基于 JS 的解决方案。