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

debugcn 发表于 Dev

乔纳森

我无法让 javascript 为现有数组中的每个 div（单独）创建随机颜色，所有所需的 div 都具有“视图”类（我真的厌倦了尝试，因此将不胜感激）。

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();

.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>

斯科特·马库斯

您正在尝试访问style从以下位置返回的 DOM 元素的“节点列表”（集合）的属性：

document.getElementsByClassName("view")

集合没有style，但集合内的 DOM 元素有。您必须遍历该集合中的每个元素并设置style实际 DOM 元素本身的属性。

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

此外，最好不要使用，getElementsByClassName()因为这会返回一个“活动节点列表”，每次使用缓存变量时都会导致再次扫描整个 DOM。document.querySelectorAll()返回一个性能更好的静态节点列表，应该在大多数情况下使用。

您还有一些无效的 HTML;出现在您的标签中。那些应该被删除：

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

此外，CSSbox-shadow属性已成为标准，并且多年来一直受到浏览器的广泛支持。不需要使用供应商前缀。

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

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();

.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;
}

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-14

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

为多个div元素的左边框生成随机颜色

JS：如何使用生成的随机数并将其设置为 div 的背景颜色

CSS：如何使链接颜色与父div相同

具有多个div且具有相同类的特定div的CSS

jQuery单击生成的具有相同类的div

多对 div 上的相同随机颜色

从数组生成每个具有随机类的div

Javascript生成具有相同亮点的随机颜色

为页面加载时的多个div分配相同的随机颜色

覆盖css中的div样式链接颜色

CSS Div 随机定位

CSS悬停-它可以影响具有相同类名的多个div

Android-如何生成具有限制的随机颜色？

如何仅使用CSS使div组具有相同的宽度？

JavaScript缩短了用于生成随机CSS颜色的重复代码

为动态生成的div设置不同的颜色

如何使用 $(this) 选择器为具有相同类的 div 设置动画？

如何为div中的每个元素设置随机边框颜色

生成具有相同类的div，但要单独更改样式

如何从html敏捷包中具有相同类的html中获取所有div

具有相同基准的Image Div和Text Div的CSS

如何在HTML / CSS中更改div的背景颜色

如何使用Puppeteer遍历具有相同类的div

使用CSS选择具有随机生成的ID的元素

将具有相同类名称的div附加到具有相同id名称的div中

在具有相同类的 div 中显示 Alt 文本（Jquery）

我的css没有在json生成的div中运行

如何减慢处理中的随机颜色生成器？

如何在Bash / Perl中随机生成ANSI颜色？