如何從同一類的css div的數組中生成隨機顏色

我無法讓javascript爲每個div（單獨）從現有數組創建隨機顏色所有需要的div都具有「視圖」類（我是真的很累，因此任何幫助將不勝感激）。如何從同一類的css 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>

來源

2017-08-16 Jonathan

您嘗試訪問「節點列表」的style財產被客戶退回的DOM元素（集合）：

document.getElementsByClassName("view")

集合沒有一個style，但集合中的DOM元素可以。您必須遍歷該集合中的每個元素，並設置實際DOM元素本身的style屬性。

雖然您可以使用傳統的for計數循環。 JavaScript數組支持循環方法，這使得設置循環和訪問數組中的每個元素變得更加容易。但是，並非所有瀏覽器都支持從DOM函數返回的節點列表上的.forEach()，因此您只需將節點列表轉換爲數組即可調用.forEach()。

另外，最好不要使用getElementsByClassName()，因爲這會返回一個「活節點列表」這會導致使用高速緩存變量每次都再次掃描整個DOM。 document.querySelectorAll()返回一個靜態節點列表，執行更好，應在大多數情況下使用。

您也有一些無效的HTML，;出現在您的標籤中。這些應該被刪除：

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

此外，CSS box-shadow物業已經標準，現在已經有好幾年了廣泛的瀏覽器支持。無需使用供應商前綴。

最後，你不應該有多個元素具有相同的id屬性值。 id的意思是在一個文檔中是獨一無二的，並且具有相同的多個元素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>

來源

2017-08-16 21:07:05

感謝您的答案，它真的很神奇，但有一個問題，當我複製代碼到JavaScript表的代碼不會在瀏覽器中執行我檢查了一切，但仍然無法正常工作我知道這很煩人，但我希望這是我們所面對的最後一道障礙，並表示感謝。。。 – Jonathan

@Jonathan確保在正文標籤關閉之前將腳本插入到文檔中，以便在執行JavaScript時，所有的HTML都將被解析到內存中 –

工作過的LIKE MAGIC !!謝謝Scott Marcus – Jonathan

該函數返回getElementsByClassName方法的HTMLCollection，所以你不能只是設置該集合style - 你需要去對所有的元素和設置風格上他們每個人。
您創建的函數被稱爲theFunction（大寫字母F），並且javascript區分大小寫，所以您必須使用完全相同的名稱。

這是基於你的代碼的修補程序：

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>

來源

2017-08-16 20:55:43 Dekel

感謝您的回答實在是驚人的，但有一個問題，當我將代碼複製到板材的JavaScript代碼不能在我檢查所有瀏覽器EXCUTE但仍然沒有按」工作我知道這很煩人，但我希望這是我們所面對的最後一道障礙，並表示感謝。。。 – Jonathan

我認爲這會爲你工作：

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將其轉換爲數組。因此，我們使用document.getElementsByClassName的調用識別view類的所有元素，然後將其轉換爲數組。

現在，我們迭代該數組中的每個元素，並創建一個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)]; 
     })

來源

2017-08-16 21:04:26

如何從同一類的css div的數組中生成隨機顏色

回答

相關問題