Random CSS value

Question

I have this page where I have 3 triangles made purely out of CSS. Every time someone loads the page I want the triangle to have different sizes.

Here's the thing illustrated in a JSFiddle : http://jsfiddle.net/qaF24/4/

What I would like to do is to randomly set the value of border-width of every triangle at page load.

I was thinking doing that with JavaScript with a Math.random or something but I didn't manage to do it, nor found some help on the internet (I don't know how to write in Javascript).

[EDIT] I forgot to say that I would like to add a min and max value.

I would appreciate a little help or guidance for this. Thanks a lot

To get a reference to an element by a CSS selector, use document.querySelector. To change styles of an element, update the appropriate camel-cased property of its style property, e.g. element.style.borderRightWidth = "5px";. You can indeed use Math.random to generate random numbers. With these ingredients you should hopefully be able to get on the right track. — icktoofay
– icktoofay, Commented Dec 24, 2014 at 22:15
i would generate the css and then set elmStyle.innerHTML=strGeneratedCSS; — dandavis
– dandavis, Commented Dec 24, 2014 at 22:23

Michał Kutra · Accepted Answer · 2014-12-24 22:26:13Z

3

Here is jsfiddle http://jsfiddle.net/qaF24/5/ with simply Math.random() usage

What I've done is:

random value between 0 and 1and multiply it by 100 (You'll get a border-width in px betwen 0 and 100px)
set is as css property of each `div' on site

edited Dec 24, 2014 at 22:26

answered Dec 24, 2014 at 22:19

Michał Kutra

1,2028 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Davcoccio Over a year ago

Thanks a lot. Could I ask you also if I can add min max value to the border-width value?

Michał Kutra Over a year ago

Try to think about this one jsfiddle.net/qaF24/16 :) It's quick solution because I'm in hurry, but should works :) Good luck

Davcoccio Over a year ago

Thanks man, I know this must be basic JavaScript but you rock! here's the result: jsfiddle.net/qaF24/18 if you feel like it tell me what you think.

ZEE · Accepted Answer · 2014-12-24 22:18:32Z

0

you can try to use LESS you declare a variable @var: Math.random(); and then in your border-width : @var;

answered Dec 24, 2014 at 22:18

ZEE

5,8994 gold badges41 silver badges55 bronze badges

Comments

Mouser · Accepted Answer · 2014-12-24 22:22:27Z

example code:

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

break down

triangle is an node list. It contains all the div nodes selected with document.querySelector.
the for lus iterates over every div.
triangle[i] where index is div is opened and style property is accessed.
A random value is generated between 0 and 200 and rounded up or down to an integer.

Of course your code uses different border widths but this should get you started.

Bonus: you can use this to select the individual divs:

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

The [0] is the first element of the node list. Since it contains only one element we can use this short cut.

Henry Zhu · Accepted Answer · 2015-01-10 20:43:23Z

This issue would be easier to solve if you used ids instead of classes so you could use document.getElementById. I suggest you replace your classes with ids instead.

Part 1: Getting a random border-width.

To accomplish this, use Math.random like you suggested in your question. Please note that using Math.random returns a value from 0 to 1. It's up to you to determine the range of what you want your border to be. For my response, I'll simply be using a range of 5 pixels but you can change that value if you want. So to get a value that ranges up to 5, you'll need to multiply Math.random() by 5. Be careful though! You'll need to convert this to a string to change the CSS.

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

Part 2: Setting the border-width of the triangle. To change the border-width, do this for the 3 ids:

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

Collectives™ on Stack Overflow

Random CSS value

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related