從樣式組中選擇css樣式

我爲我的數據庫中的每個條目生成Div。從樣式組中選擇css樣式

<div class='db-green'>Sample Code</div> 
<div class='db-blue'>Sample Code</div> 
<div class='db-blue'>Sample Code</div> 
<div class='db-yellow'>Sample Code</div>

我希望通過在隨機supose中定義顏色在數組中的內容來選擇Div類中的顏色。

我希望用Less或sass解決方案還是應該使用JS？

來源

2014-06-18 jinni

我想我沒看懂問題。你需要隨機選擇一種顏色並將其與一個元素相關聯？ – gespinha

正在尋找這樣的東西？ http://stackoverflow.com/questions/19036175/adding-a-random-class-to-element-from-an-array-that-duplicates-using-jquery – gespinha

Sass和LESS都是CSS預處理器。 – hutchbat

您可以使用生成一個隨機顏色的JavaScript函數：

function getColor() { 
    var r = Math.floor(Math.random() * 256); 
    var g = Math.floor(Math.random() * 256); 
    var b = Math.floor(Math.random() * 256); 

    return "#"+ r.toString(16) + g.toString(16) + b.toString(16) ; 
}

，然後用JS DOM（或JQuery的），以改變各div的CSS background-color屬性：

var divs = document.getElementsByTagName("div"); 

for(var i = 0; i < divs.length; i++) { 
    divs.item(i).style.backgroundColor = getColor(); 
    divs.item(i).innerHTML = getColor(); 
}

見JSFiddle

UPDATE：您也可以調用內部Less的方法，使用反引號可以訪問底層的JavaScript處理器（我不確定這是否適用於less4j之類的非JavaScript Less實現，因爲它沒有記錄特徵）。這混合：

.generateColor() { 
    @color: color(`"#" + (Math.random()*0xFFFFFF<<0).toString(16)`); 
}

將設置@color變量爲隨機生成的顏色。然後，您可以在選擇器塊中使用它：

.db-color-1 { 
    .generateColor(); 
    background-color: @color; 
} 

.db-color-2 { 
    .generateColor(); 
    background-color: @color; 
} 

.db-color-3 { 
    .generateColor(); 
    background-color: @color; 
}

並且每個類都將（希望）具有不同的顏色。

來源

2014-06-18 22:44:18 helderdarocha

我在PHP中做了這個，而我希望在Sass或Less中做。但這是這個想法。謝謝。 – jinni

我以爲你想在客戶端做點什麼。您可以使用反引號在JavaScript中插入JavaScript。調用這個mixin：'.generateColor（）{@color：color（\'「＃」+（Math.random（）* 0xFFFFFF << 0）.toString（16）\'）;}'可以在'@ color'變量中獲得隨機顏色：'.db-green {.generateColor（）;背景顏色：@color;}' – helderdarocha

有一個解決問題的方法類似於你叫出來的一個：randomly display a div class using JQuery

您可以使用jQuery來定義顏色隨機div元素：

var divs = ['.db-green', '.db-blue', '.db-yellow']; // possible divs 
var color = ["blue", "yellow", "red"]; // potential colors 
var random = Math.floor(Math.random() * divs.length); 
var entry = divs[random]; 
$(entry).css("color", color[0]);

來源

2014-06-18 23:02:30 samhuang91

從樣式組中選擇css樣式

回答

相關問題