I want to manipulate CSS using Javascript

Question

in the below CSS code I want to make the size of square random which I can do with Math.random() property of Javascript but I don't know how to use it to specify size in css.

 #square {
      width: 100px;
      height: 100px;
      background: red;
    }

here in place of width and height specified I want it random. Also I want the coordinates/orientation of square to be random . It is different from generating random numbers . generating random numbers is a part of solving this but not the complete solution.

Does this answer your question? [Is there any way to generate a random number within a given range using only CSS?](https://stackoverflow.com/questions/33704397/is-there-any-way-to-generate-a-random-number-within-a-given-range-using-only-css) — ABGR, Jun 19 '20 at 06:23
Not passible doing it entirely though CSS. But you can use some pre-processors https://stackoverflow.com/questions/33704397/is-there-any-way-to-generate-a-random-number-within-a-given-range-using-only-css — ABGR, Jun 19 '20 at 06:24

Always Helping · Answer 1 · 2020-06-19T06:18:03.067

3

Here you go. Working code.

var randomWidth = Math.random()* 500;
var width = randomWidth.toString();
document.getElementById("square").style.width = width + "px";
document.getElementById("square").style.height = width + "px";

#square {
  background: red;
}

<div id="square"></div>

Hope this helps.

edited Jun 19 '20 at 06:18

answered Jun 19 '20 at 06:12

Always Helping

14,316
4
13
29

1

I guess the OP is already about `Math.Random` and doing it through JavaScript. – ABGR Jun 19 '20 at 06:25
@ABGR And he also advised that he is not sure how to use it. – Always Helping Jun 19 '20 at 06:28
`toString()`is not needed – Julien Maret Jun 19 '20 at 06:32
@JulienMaret just in case. No harm in putting. I am aware that it works without that too. Thanks anyways :) – Always Helping Jun 19 '20 at 06:34
actually I also wanted the position to be random. i.e. the coordinate/orientation to be random can you please suggest something about that? – Himanshu Jha Jun 19 '20 at 11:52
do you mean rotation by orientation? and the postion inside a definited space or it can go out of the page? – Julien Maret Jun 19 '20 at 12:58

turivishal · Answer 2 · 2020-06-19T12:26:23.823

You can do something like this, this will set both height and width random, if you want to set same then you can use only same random numbers:

reset();
function reset(){
    reset_square();
    reset_position();
}

function reset_square() {
    document.getElementById("square").style.width = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100

    document.getElementById("square").style.height = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100
}

function reset_position(){
    document.getElementById("square").style.top = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100

    document.getElementById("square").style.left = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100
}

#square{
    background-color: red;
    color: white;
    position: absolute;
}

<div id="square">This is custom size</div><br>
<button onclick="reset()">Reset</button>

Hope this help :)

score 2 · Answer 3 · answered Jun 19 '20 at 06:29

2

function randSize() {
  return Math.random()* 100 + 10 + "px";
}

for (var e of document.getElementsByClassName("rand")){
  e.style.width = randSize();
  e.style.height = randSize();
}

#elem1 {
  background-color: blue;
}

#elem2 {
  background-color: red;
}

#elem3 {
  background-color: green;
}

<div id="elem1" class="rand"></div>
<div id="elem2" class="rand"></div>
<div id="elem3" class="rand"></div>

answered Jun 19 '20 at 06:29

Julien Maret

579
1
4
22

actually I also wanted the position to be random. i.e. the coordinate/orientation to be random can you please suggest something about that? – Himanshu Jha Jun 19 '20 at 11:58

score 0 · Answer 4 · answered Jun 20 '20 at 03:51

reset();
function reset(){
    reset_square();
    reset_position();
}

function reset_square() {
    document.getElementById("square").style.width = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100

    document.getElementById("square").style.height = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100
}

function reset_position(){
    document.getElementById("square").style.top = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100

    document.getElementById("square").style.left = Math.floor(Math.random() * 100) + 1 + "px"; 
    // returns a random integer from 1 to 100
}

#square{
    background-color: red;
    color: white;
    position: absolute;
}

<div id="square">This is custom size</div><br>
<button onclick="reset()">Reset</button>

I want to manipulate CSS using Javascript

4 Answers4