Question

我正在构建一个网站，我希望背景img可以伸展到浏览器的100％高度x宽度，并且还可以在刷新时交替使用随机图像;我目前了解如何使用div制作一个img拉伸并使用CSS，我也理解如何使用JS替换不同的图像（我对JS一无所知，我用谷歌搜索了这个）。问题是，我不知道如何将CSS规则应用于JS，我只知道如何将它们应用于HTML。有人可以告诉我如何将这些相同的CSS规则应用于JS吗？我将在下面发布CSS，DIV（包含一个背景img）和JS（带有交替图像，但没有CSS规则）以便澄清。我真的很珍惜你的家伙＆＃39;输入！谢谢！

<div id="background">
<img src="images/2.jpg" class="stretch" alt="#" /></div>

#background{
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -1; 
}

.stretch {
width:100%;
height:100%;
}

<script type = "text/javascript">
    <!--
    document.write("<img src= \""+Math.floor(1+Math.random()*5)+".jpg\"/>");
    //-->
</script>

Answer 1

您可以使用以下javascript。（您需要为每个属性写一行）

document.getElementById("background").style.width= "100%"

Answer 2

应用所有CSS规则的更好方法是在类中包含所有规则，然后使用Js将该类添加到元素中。

<div id="background">
<img src="images/2.jpg" alt="#" id="stretch" /></div>

.background{
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -1; 
}

.stretch {
width:100%;
height:100%;
}

<script type = "text/javascript">

    document.write("<img src= \""+Math.floor(1+Math.random()*5)+".jpg\"/>");
    document.getElementById("background").setAttribute("class", "background");
    document.getElementById("stretch").setAttribute("class", "stretch");

</script>

如何将这些相同的CSS规则应用于JS？

2 个答案: