2014-12-24 295 views
0

我有這個頁面,我有3個純粹由CSS製成的三角形。 每次有人加載頁面時,我都希望三角形具有不同的大小。隨機CSS值

這裏有一個的jsfiddle所示的東西:http://jsfiddle.net/qaF24/4/

我想這樣做的是隨機設置的每一個三角形的border-width在頁面加載的值。

我在想用JavaScript做一個Math.random什麼的,但是我沒有設法做到這一點,也沒有在互聯網上找到一些幫助(我不知道如何用Javascript編寫)。

[編輯]我忘了說我想增加一個minmax的值。

我希望對此有所幫助或指導。非常感謝

+1

要獲得通過CSS選擇器的元素的引用,使用'document.querySelector'。要更改元素的樣式,請更新其'style'屬性的適合駝峯的屬性,例如'element.style.borderRightWidth =「5px」;'。你確實可以使用'Math.random'來產生隨機數。有了這些成分,你應該有希望能夠走上正軌。 – icktoofay

+0

你試過了什麼? –

+0

我會生成CSS,然後設置elmStyle.innerHTML = strGeneratedCSS; – dandavis

回答

2

這裏的jsfiddle http://jsfiddle.net/qaF24/5/與單純Math.random()使用

我所做的是:

  • 0到1之間的隨機值並將其乘以100(您將得到0到100像素之間的px的邊框寬度)
  • 組是如在現場每個`的div」的CSS屬性
+0

非常感謝。我是否也可以問你是否可以在'border-width'值中加'min'' max'值? – Davcoccio

+0

試着想想這個http://jsfiddle.net/qaF24/16/ :)這是快速的解決方案,因爲我很着急,但應該工作:)祝你好運 –

+0

謝謝你,我知道這必須是基本的JavaScript,但是你搖滾!這裏的結果是:http://jsfiddle.net/qaF24/18/如果你覺得它告訴我你的想法。 – Davcoccio

0

,你可以嘗試使用LESS聲明變量@var: Math.random();,然後在

0

示例代碼:

var triangle = document.querySelector("div"); 
for (var i = 0; i < triangles.length; ++i) 
{ 
    triangle[i].style.borderWidth = Math.round(Math.random()*200) + "px"; 
} 

擊穿

  1. 三角形是node list。它包含用document.querySelector選擇的所有div節點。
  2. for lus迭代每div
  3. triangle [i]其中indexdiv被打開並且style屬性被訪問。
  4. 0200之間生成一個隨機值,向上或向下取整爲整數。

當然,你的代碼使用不同的邊框寬度,但這應該讓你開始。

獎勵:你可以用它來選擇單個的div:

document.querySelector("div[class='color']")[0]; //replace color with the colour class names you use. 

[0]是節點列表的第一個元素。由於它只包含一個元素,我們可以使用這個捷徑。

0

如果您使用ids而不是classes,則此問題將更容易解決,因此您可以使用document.getElementById。我建議你用ids代替你的classes

第1部分:隨機獲取border-width

要完成此操作,請使用Math.random,就像您在問題中所建議的一樣。請注意,使用Math.random會返回0到1之間的值。由您決定您希望邊界的範圍。對於我的迴應,我只會使用範圍5 pixels,但如果需要,您可以更改該值。因此,要得到一個範圍可達5的值,您需要將Math.random()乘以5.請小心!您需要將其轉換爲字符串才能更改CSS

var randomWidth = Math.random()*5; 
var width = randomWidth.toString(); 


第2部分:設置在三角形的border-width。 要更改border-width,爲3 ids做到這一點:

document.getElementById("red").style.borderWidth = width + "px";