Javascript 单击即可更改的可缩放背景图像

我有一个问题，有点像是一个问题的延伸

我有我的背景图像工作；但是，我不想让它们自动平铺，而是想将它们链接到浏览器的比例。我知道如何使用CSS创建一个可伸缩的背景图像，但我不知道如何将CSS链接到脚本中的backImage变量（可在下面使用，或在从上一个线程跳转之后使用），以便它应用于所有不同的图像

<script type="text/javascript">

var backImage = [
    "images/street.png",
    "images/market.jpg",
    "images/building.jpg",
    "images/skyscraper.jpg",
    "images/gasstation.jpg",
    "images/trees.jpg"
];

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
};
</script>

var backImage=[
“images/street.png”，
“images/market.jpg”，
“images/building.jpg”，
“图片/摩天大楼.jpg”，
“images/gastation.jpg”，
“images/trees.jpg”
];
函数更改bgImage（whichImage）{
if（document.body）{
document.body.style.backgroundImage='url（'+backImage[whichImage]+'）；
}
};

棘手的部分是我无法将该类应用于HTML，因为我已经在应用这个

<a href="javascript:changeBGImage(1)">Change</a>

…将HTML中的现有div与多个其他类绑定；因此，我需要将该类添加到backImage或javascript中的特定png和jpg中

---

提前谢谢

作为

changeBGImage（）

函数的一部分，您可以对

document.body

进行额外的

.style.

更改，以便在每个背景图像更改时对其执行任意操作

编辑：

从本质上讲，这是：

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
    }
};

把它变成这样：

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
        document.body.style.backgroundSize = '###px';
    }
};

---

或者，如果您想在body元素上设置一些CSS而不是

背景大小

，则可以在

style.

参数之后进行设置。请记住，将CSS翻译为JS时，连字符被删除，下一个字母大写（就像CSS中的

背景图像

变成了

背景图像

在JS中）

一位朋友帮我解决了我的问题。下面是：

<script type="text/javascript">

var backImage = [
    "images/vintagemap.png",
    "images/earbuds.jpg",
    "images/flames.jpg",
    "images/grass.jpg",
    "images/library.jpg",
    "images/shapes.jpg"
];

function changeBGImage(whichImage) {
    if (document.body){
        document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
        document.body.className = 'bgchange';
    }
};

</script>

它现在可以将任何照片调整为可缩放的全屏背景图像

---

希望其他人会觉得这很有帮助

我只是不知道正确的js结构以及如何将其应用到我现有的代码中。请你写一个例子好吗？非常感谢你的帮助！不幸的是，我仍然没有很好地解释我自己。下面是：我有一个具有许多不同CSS属性的类。如何将特定类应用于此脚本，以便在显示时将其应用于每个背景图像？（再次感谢你！）嗯。。。CSS是否会根据图像进行更改？如果不是，为什么不直接将CSS而不是类应用到

标记上呢？或者将您在

标记上定义的类放在标记中？如果您想在JS中执行此操作，它将是

document.body.setAttribute（“class”，“className”）CSS不会根据图像进行更改。每个图像只是自动拉伸或收缩以填充浏览器窗口。我无法将CSS分配给主体，因为我已经有了一个现有的主体背景图像（repeating.png），该图像在单击某些链接触发其他图像之前一直保持不变。不过，我会试试你列出的JS，让你知道它是如何运行的。非常感谢！好的，以下操作不起作用：函数changeBGImage（whichImage）{if（document.body）{document.body.style.backgroundImage='url（'+backImage[whichImage]+'）；document.body.style.backgroundImage.setAttribute（.bgchange”）；}；我将“document.body.style.backgroundImage.setAttribute（.bgchange”）”放在“document.body.style.backgroundImage='url（'+backImage[whichImage+'）；”之前，然后放在后面（如上所示）。将其放在前面只会破坏图像；将其放在后面不会做任何事情。使用“document.body.setAttribute（“class”）”将适用于身体，而不是图像。祝贺你，Paige！如果你有能力，请确保将你的答案标记为“已接受”，以便其他人可以从你的成功中学习。干杯~是的，谢谢！我必须等待24小时才能接受我自己的答案。：）
.bgchange {
    background-repeat:no-repeat;
    background-size:cover;
}