Question

也许我想做的事情是不可能的，但在放弃之前我想先问一下。

我正在编辑我的博客，并希望每次访问该页面时，我的文字帖子的背景颜色都会随机变化。

我是通过Google搜索在teamtreehouse.com上找到的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf=8">
    <style type="text/css">
        #posts {
            width: 90%;
            height: 700px;
            margin: auto
        }
    </style>
</head>
<body onload="return ran_col()">
    <div id="posts">
    </div>
    <script type="text/javascript">
        function ran_col() { //function name
            var color = '#'; // hexadecimal starting symbol
            var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
            color += letters[Math.floor(Math.random() * letters.length)];
            document.getElementById('posts').style.background = color; // Setting the random color on your div element.
        }
    </script>
</body>
</html>

效果非常好。我遇到的问题是我有多个#posts div，它只会为其中一个#posts div生成随机背景颜色。其余的没有背景颜色。

我希望我网站上的每个#posts div都有不同的随机颜色，而不是相同的随机颜色。有没有办法做到这一点？我承认我对这些事情并不擅长，但是一旦我脑子里有了一个想法，我就很难放手。任何建议或提示都会很棒。

谢谢！

Answer 1

使用以下功能：

document.getElementsByClassName("posts").style.background = color;

而不是

 document.getElementById('posts').style.background = color;

一个Id，必须是唯一的，一个类可以有多个项目。 Maks肯定你改变你的div来包含这个类而不是你正在使用的Id。

示例：

<div id="posts">

应该是

<div class="posts">

编辑＃1：根据下面的评论，必须更改css文件，以便ID成为类。因此，只需将#posts更改为.posts

即可

编辑＃2： getElementsByClassName将返回一个元素数组，然后你必须迭代它们来改变背景颜色，如下所示：

var x = getElementsByClassName("posts");
var i; 
for(i=0;i<x.length;i++)
{
   x[i].style.backgroundColor = color; 
}

编辑＃3：这是上述所有内容的最终工作示例。试试看。我添加了一个div =“page”容器，该容器在脚本末尾变得可见，这样div就不会一个接一个地加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf=8">
    <style type="text/css">
        .posts {
            width: 90%;
            height: 700px;
            margin: auto
        }
        #page{
            display:none;
        }
    </style>
    <script>
            function ran_col() { //function name
                var color; // hexadecimal starting symbol
                var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here

                var x= document.getElementsByClassName("posts");
                var i;
                for(i=0;i<x.length;i++)
                {
                    color="#";
                    color += letters[Math.floor(Math.random() * letters.length)];
                    x[i].style.backgroundColor = color;
                }
                document.getElementById("page").style.display = "block";
            }
        </script>
</head>
<body onload="ran_col()">
    <div id="page">

        <div class="posts">
            test1
        </div>
        <div class="posts">
            test2
        </div>
        <div class="posts">
        test3
        </div>

    </div>
</body>
</html>

如何随机更改多个div背景颜色？

1 个答案: