如何从具有相同类的css div的数组生成随机颜色

时间：2017-08-16 20:48:59

标签： javascript html css arrays

我不能让javascript为现有数组中的每个div（单独）创建一个随机颜色所有想要的div都有＆＃34; view＆＃34; （我真的很累，所以任何帮助都会受到高度赞赏）。

＆＃13;
＆＃13; 
var colors = [
  "rgb(52,152,219)",
  "rgb(243,156,18)",
  "rgb(155,89,182)",
  "rgb(30,130,76)",
  "rgb(219,10,91)",
  "rgb(102,51,153)",
  "rgb(58,83,155)",
  "rgb(31,58,147)",
  "rgb(217,30,24)"
];
function theFunction() {
  document.getElementsByClassName("view").style.backgroundColor =
    colors[Math.floor(Math.random() * 10)];
}
theFunction();
＆＃13; 
.onetwo {
  width: 1000px;
  position: relative;
  left: 300px;
  height: 100%;
  background: #efefef;
}
.view {
  width: 260px;
  height: 260px;
  border-radius: 3px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
  background: #00baf1;
  display: inline-block;
  margin: 1px;
}
＆＃13; 
<body>
  <div class="onetwo">
    <div class="view" ; id="DIVDIV">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>WLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>We offer Comfortable Dorms for our students to be a step closer to the university We offer Comfortable Dorms for our students to be a step closer to the university We offer Comfortable Dorms for our students to be a step closer to the university
        </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
    <div class="view" ; id="DIVDIV">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
        porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

  1. 函数getElementsByClassName返回HTMLCollection，因此您不能只在该集合上设置style - 您需要遍历所有元素并在每个元素上设置样式。
  2. 您创建的函数名为theFunction（使用大写字母F），javascript区分大小写，因此您必须使用完全相同的名称。

    3. 以下是基于您的代码的修复：

    var colors = ["rgb(52,152,219)", "rgb(243,156,18)", "rgb(155,89,182)", "rgb(30,130,76)", "rgb(219,10,91)", "rgb(102,51,153)", "rgb(58,83,155)", "rgb(31,58,147)", "rgb(217,30,24)"];
function theFunction() {
  var elements = document.getElementsByClassName("view");
  for (var i = 0; i < elements.length; i++) {
      elements[i].style.backgroundColor = colors[Math.floor(Math.random() * 10)];
  }
}
theFunction();
    .onetwo{

    width: 1000px;
    position: relative;
    left: 300px;
    height: 100%;
    background: #efefef;
}
.view {
    width: 260px; 
    height: 260px;
    border-radius: 3px;
    padding: 0;
    overflow-x:hidden;
    overflow-y: auto;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    -moz-box-shadow: 1px 1px 2px #e6e6e6;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #00baf1;
    display: inline-block;
    margin : 1px;
}
    <body>
   <div class = "onetwo">
  <div class="view"; id="DIVDIV"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
          <div class="view"; id="DIVDIV"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
          <div class="view"; id="DIVDIV"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
          <div class="view"; id="DIVDIV"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p></div>
          <div class="view"; id="DIVDIV"><p>WLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.   </p></div>
          <div class="view"; id="DIVDIV"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p></div>
        <div class="view"; id="DIVDIV"><p>We offer Comfortable Dorms for our students to be a step closer to the university We offer Comfortable Dorms for our students to be a step closer to the university We offer Comfortable Dorms for our students to be a step closer to the university </p></div>
        <div class="view"; id="DIVDIV"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
        <div class="view"; id="DIVDIV"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
        </div>
    </body>

答案 1 :(得分：1)

您正在尝试访问＆＃34;节点列表的style属性＆＃34;从（

）返回的DOM元素的（集合） 
document.getElementsByClassName("view")

集合没有style，但集合中的DOM元素有。{1}}。您必须迭代该集合中的每个元素，并设置实际DOM元素本身的style属性。

虽然您可以使用传统的for计数循环。 JavaScript数组支持 forEach() 循环方法，该方法可以更轻松地设置循环并访问数组中的每个元素。但是，并非所有浏览器都支持从DOM函数返回的节点列表上的.forEach()，因此您只需将节点列表转换为数组即可调用.forEach()。

此外，最好不要使用getElementsByClassName() ，因为这会返回＆＃34;实时节点列表＆＃34; ，这会导致每次使用缓存变量时，都要再次扫描整个DOM。 document.querySelectorAll() 会返回一个效果更好的静态节点列表，并且应该在大多数情况下使用。

您还有一些无效的HTML，其中;出现在您的代码中。那些应该删除：

<div class="view" ; id="DIVDIV1">

此外，CSS box-shadow属性已成为标准，并且已有多年的浏览器支持。没有必要使用供应商前缀。

最后，您的id属性不应包含多个具有相同值的元素。 id在文档中应该是唯一的，并且具有相同id的多个元素可以/将导致CSS和JavaScript中的问题。如果您正在寻找一种对所有元素进行分组的方法，请为每个元素使用一个CSS类。

＆＃13;
＆＃13; 
var colors = [
  "rgb(52,152,219)",
  "rgb(243,156,18)",
  "rgb(155,89,182)",
  "rgb(30,130,76)",
  "rgb(219,10,91)",
  "rgb(102,51,153)",
  "rgb(58,83,155)",
  "rgb(31,58,147)",
  "rgb(217,30,24)"
];

function theFunction() {
  // Get all the elements that use the "view" class but do it using querySelectorAll
  var divs = Array.prototype.slice.call(document.querySelectorAll(".view"));
  
  // Loop through the array of divs
  divs.forEach(function(div){
    // Set the background color of each div
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  });

}
theFunction();
＆＃13; 
.onetwo{
    width: 1000px;
    position: relative;
    left: 300px;
    height: 100%;
    background: #efefef;
}
.view {
    width: 260px; 
    height: 260px;
    border-radius: 3px;
    padding: 0;
    overflow-x:hidden;
    overflow-y: auto;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #00baf1;
    display: inline-block;
    margin : 1px;
}
＆＃13; 
<div class="onetwo">
    <div class="view" id="DIVDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
    <div class="view" id="DIVDIV2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
    <div class="view" id="DIVDIV3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
    <div class="view" id="DIVDIV4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p></div>
    <div class="view" id="DIVDIV5"><p>WLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.   </p></div>
    <div class="view" id="DIVDIV6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p></div>
    <div class="view" id="DIVDIV7"><p>We offer Comfortable Dorms for our students to be a step closer to the university We offer Comfortable Dorms for our students to be a step closer to the university We offer Comfortable Dorms for our students to be a step closer to the university </p></div>
    <div class="view" id="DIVDIV8"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
    <div class="view" id="DIVDIV9"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.  </p></div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我认为这对你有用：

Array.from(document.getElementsByClassName("view"))
    .forEach((item) => {
        function randValue() { return Math.floor(Math.random()*255)}
        item.style.backgroundColor = 'rgb('+randValue()+','+randValue()+','+randValue()+')';
    })

正如其他回答者所说，您无法迭代HTMLCollection，但您可以使用Array.from将其转换为数组。因此，我们通过调用view来识别document.getElementsByClassName类的所有元素，然后将其转换为数组。

现在，我们遍历该数组中的每个元素，并创建一个RGB颜色值，并将其分配给item.style.backgroundColor，这会更新我们当前正在迭代的backgroundColor属性的项目

您的问题要求随机颜色，但我不知道这是否意味着您提供的数组中是随机的。我的方法为每个元素提供真正随机的颜色生成。

但是，如果您需要从一组选项中随机选择，您可以使用这种非常相似的方法。

Array.from(document.getElementsByClassName("view"))
        .forEach((item) => {
        var colors = [
              "rgb(52,152,219)",
              "rgb(243,156,18)",
              "rgb(155,89,182)",
              "rgb(30,130,76)",
              "rgb(219,10,91)",
              "rgb(102,51,153)",
              "rgb(58,83,155)",
              "rgb(31,58,147)",
              "rgb(217,30,24)"
            ];
            item.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)];
        })
相关问题
最新问题