Question

我的问题有点像this thread的扩展。

我的背景图片有效;但是，我想将它们链接到浏览器，而不是让它们自动平铺。我知道如何使用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>

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

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

... HTML中的现有div与多个其他类;因此我需要将类添加到backImage或javascript中的特定png和jpgs。

提前致谢！

Answer 1

一位朋友帮助我解决了我的问题。这是：

<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>

我添加了一行“document.body.className ='bgchange';”在我原来的JS下面，然后编写了以下CSS类：

.bgchange {
    background-repeat:no-repeat;
    background-size:cover;
}

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

希望其他人觉得这很有用！

Answer 2

作为changeBGImage()功能的一部分，您可以对.style.进行额外的document.body更改，以便在每个背景图片发生变化时为您做任何您喜欢的事情。

编辑：

基本上，请理解：

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元素上设置除background-size之外的其他CSS，则应在.style.参数之后执行此操作。请记住，在将CSS转换为JS时，将删除连字符并将下一个字母大写（就像CSS中的background-image变为JS中的backgroundImage

可点击的可缩放背景图像

2 个答案: