如何在嵌入式样式表中使用javascript变量作为背景？

Question

What I'm trying to do this evening is to get my website to load a random background image every time you refresh the page. 我今晚想做的是让我的网站在每次刷新页面时加载随机的背景图片。

Earlier in this project, I tried to get my background to interact with window size and screen resolution like this website (for example) , and succeeded (you can see my code in the "html,body" selector in the embedded style sheet). 在该项目的早期，我尝试使我的背景与窗口大小和屏幕分辨率进行交互，例如该网站（例如），并成功了（您可以在嵌入式样式表的“ html，body”选择器中看到我的代码）。

That was when I only used background1.jpg; 那是我只使用background1.jpg的时候； now I want to randomly switch between several. 现在我想在几个之间随机切换。 I added the script below my title tag and I replaced the body tag with some script as well. 我在标题标签下添加了脚本，并用一些脚本替换了正文标签。 This is what I'm working with now. 这就是我现在正在使用的。

If I delete the background-related material from my style sheet, I succeed in randomizing the background, but that formatting is lost, which isn't acceptable. 如果我从样式表中删除与背景相关的材料，则可以成功地随机化背景，但是格式会丢失，这是不可接受的。 If I leave it as you see here, I retain the formatting, but fail to randomize. 如果我将其保留为您在此处看到的格式，则将保留格式，但无法随机化。 I want to have my cake and eat it, too. 我也想吃我的蛋糕。 I've hit a wall and any help would be greatly appreciated. 我碰壁了，任何帮助将不胜感激。

<head>
      <title>Welcome to Cuhteekaloo!</title>

      <SCRIPT LANGUAGE="JAVASCRIPT">
          var bgRand = Math.round(Math.random() * 5)
          bgOpt = new Array(6);
          bgOpt[0] = "background1.jpg";
          bgOpt[1] = "background2.jpg";
          bgOpt[2] = "background3.jpg";
          bgOpt[3] = "background4.jpg";
          bgOpt[4] = "background5.jpg";
          bgOpt[5] = "background6.jpg";
          var bgCurr = bgOpt[bgRand];
      </SCRIPT>

      <link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
      <link rel="icon" type="image/jpg" href="jack.jpg"/>

      <style type="text/css">
          html,body {margin:0; padding:0; height:100%; overflow-y:hidden;   
          background: url(background1.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;}
          body  {color:white;}
          img       {border:3px white solid;}
          p     {text-align:justify;}
          a:link, a:visited {color:white;}
          a:hover, a:active {color:orange;}
          .center   {text-align:center; display:block;}
      </style>
</head>

<script language="JAVASCRIPT">
document.write('<body background="' + bgCurr + '" text="white">')
</script>

Answer 1

I hate when little, but big problems, get in your way of a great project. 我讨厌只有小问题却是大问题，妨碍了您进行出色的项目。
To begin, the issue is with the background changer and the randomizer. 首先，问题在于背景转换器和随机发生器。

The issue with the randomizer is that you have bgRand set as a variable meaning that it is loaded once at the beginning of the page loading. randomizer的问题在于，您已将bgRand设置为变量，这意味着它将在页面加载开始时加载一次。 Try making it a function instead: 尝试使其成为一个函数：

var bgRand = function(){return Math.round(Math.random() * 5);}
      bgOpt = new Array(6);
      bgOpt[0] = "background1.jpg";
      bgOpt[1] = "background2.jpg";
      bgOpt[2] = "background3.jpg";
      bgOpt[3] = "background4.jpg";
      bgOpt[4] = "background5.jpg";
      bgOpt[5] = "background6.jpg";
      var bgCurr = bgOpt[bgRand()];

The next issue is how your setting the background. 下一个问题是如何设置背景。 You can do this much easier and make your "cake" much more delicious. 您可以更轻松地完成此操作，并使“蛋糕”更美味。 Try this chunk of code: 试试下面这段代码：

document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";

Now feel free to write the body tag with an id of "body". 现在可以随意编写一个id为“ body”的body标签。 Like so: 像这样：

<body id="body">

Finally I will give you a fork to eat your cake (AKA copy and paste source code): 最后，我将给你一个叉子来吃蛋糕（又名复制并粘贴源代码）：

     <head>    
            <title>Welcome to Cuhteekaloo!</title>

                  <SCRIPT LANGUAGE="JAVASCRIPT">
                      var bgRand = function(){return Math.round(Math.random() * 5);}
                      bgOpt = new Array(6);
                      bgOpt[0] = "background1.jpg";
                      bgOpt[1] = "background2.jpg";
                      bgOpt[2] = "background3.jpg";
                      bgOpt[3] = "background4.jpg";
                      bgOpt[4] = "background5.jpg";
                      bgOpt[5] = "background6.jpg";
                      var bgCurr = bgOpt[bgRand]();
    document.getElementById("body").style.backgroundImage = "url('"+bgCurr+"')";
                  </SCRIPT>
        <link rel="stylesheet" type="text/css" href="cuhteekaloo.css"/>
              <link rel="icon" type="image/jpg" href="jack.jpg"/>

              <style type="text/css">
                  html,body {margin:0; padding:0; height:100%; overflow-y:hidden;   
background-image: url(background1.jpg);
background-repeat: no-repeat;
background-position: center; 
background-attachment: fixed; 
                  body  {color:white;}
                  img       {border:3px white solid;}
                  p     {text-align:justify;}
                  a:link, a:visited {color:white;}
                  a:hover, a:active {color:orange;}
                  .center   {text-align:center; display:block;}
              </style>
        </head>
    <body id="body">

Hope this helped! 希望这对您有所帮助！

如何在嵌入式样式表中使用javascript变量作为背景？

问题描述

1 个解决方案

解决方案1
1 2014-02-01 02:43:39

如何在嵌入式样式表中使用javascript变量作为背景？

问题描述

1 个解决方案

解决方案1 1 2014-02-01 02:43:39

解决方案1
1 2014-02-01 02:43:39