如何使用JS设置HTML标签的“ background”属性，同时仍然允许CSS文件中的其他属性不变？

Question

我在网站的单独.css文件中包含一些CSS，如下所示：

html {
    background: url("images/1080 Native2.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    height: 100%;
}

这行得通，我想保留这种确切的样式，但是每天都有，这取决于一个月中的某天，背景图像会有所不同。 我的意图是使用JS在jQuery上执行此操作，并列出数组中的所有文件名，并以每月的天数取数组大小取模，以显示要显示的图像。 该脚本部分起作用的原因在于，它确实可以获取该日期的正确文件名，但是由于某种原因，它无法将此信息正确地写入html标记的样式。 以下是我当前的HTML，CSS和JS文件：

HTML（index.php）：

  <html> <head> <title>ChillSpot Alpha-test 1.0.7</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <script type="text/javascript" src="background.js"></script> <script type="text/javascript"> $( document ).ready( getImage );</script> </head> ... (rest of page)

JavaScript（background.js）：

  <!-- function getImage(){ var myimages=new Array(); //specify images below. myimages.push("1080pAfrican.jpg"); myimages.push("1080pDragon.jpg"); myimages.push("1080pIndia.jpg"); myimages.push("1080pNativeAmerican.jpg"); myimages.push("1080pNativeAmerican2.jpg"); var len = myimages.length; var dayOfMonth = new Date().getDate(); var index = dayOfMonth % len; alert(dayOfMonth + "," + index + "," + myimages[index]); //document.write("<html style='background: url('images/" + myimages[index] + "') no-repeat center center fixed;'>"); document.getElementsByTagName('html')[0].style.background = 'url("images/' + myimages[index] + '") no-repeat center center fixed;'; } //-->

CSS（style.css）：

  html { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; }

我为此使用jquery-1.11.2.min.js

...我的方法有什么问题？ 我查了很多关于javascript的东西，但我不明白这是怎么回事。 我认为这可能与我实际上尝试更改html标签的“ background”属性有关，但我不确定！

首先十分感谢！

Answer 1

如果您完全要使用jQuery，请也将其用于选择器:)

注意：您可以使用文字数组来代替所有推送。

function getImage(){
    var myimages=["1080pAfrican.jpg",
         "1080pDragon.jpg",
         "1080pIndia.jpg",
         "1080pNativeAmerican.jpg",
         "1080pNativeAmerican2.jpg"];

    var len = myimages.length;
    var dayOfMonth = new Date().getDate();
    var index = dayOfMonth % len;
    alert(dayOfMonth + "," + index + "," + myimages[index]);

    $('html').css('background-image', 'url("images/' + myimages[index] + '")');
}

Answer 2

仅使用background-image属性设置background-image 。

静态CSS：

html {
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

然后在您的脚本中，只需执行

$('html').css('background-image', 'url("images/' + YOUR_SELECTED_IMAGE + '")');

Answer 3

尝试这个：

document.getElementsByTagName('html')[0].style.background = "url('images/" + myimages[index] + "') no-repeat center center fixed;";

我认为您在单引号和双引号的顺序方面遇到问题。

如何使用JS设置HTML标签的“ background”属性，同时仍然允许CSS文件中的其他属性不变？

问题描述

3 个解决方案

解决方案1
3 已采纳 2015-01-05 19:42:58

解决方案2
2 2015-01-05 19:38:31

解决方案3
1 2015-01-05 19:43:05

如何使用JS设置HTML标签的“ background”属性，同时仍然允许CSS文件中的其他属性不变？

问题描述

3 个解决方案

解决方案1 3 已采纳 2015-01-05 19:42:58

解决方案2 2 2015-01-05 19:38:31

解决方案3 1 2015-01-05 19:43:05

解决方案1
3 已采纳 2015-01-05 19:42:58

解决方案2
2 2015-01-05 19:38:31

解决方案3
1 2015-01-05 19:43:05