I have a desire to use Javascript to control CSS styles

Question

I have a desire to use Javascript to control CSS styles

Within the CSS code below, I am seeking to vary the size of a square randomly. This can be achieved using the Math.random() property in Javascript, but I am uncertain how to apply it to define the size in CSS.

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

Instead of fixed values for width and height, I desire them to be randomized. Additionally, I would like the position/orientation of the square to be random as well. This goes beyond simply generating random numbers; while that is part of the solution, it does not encompass the entire approach.

javascript css

Answer 1

Answer №1

Here is the solution you've been waiting for!

let randomNumber = Math.random() * 500;
let widthValue = randomNumber.toString();
document.getElementById("square").style.width = widthValue + "px";
document.getElementById("square").style.height = widthValue + "px";

#square {
  background: red;
}

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

I hope this provided code snippet helps you with your project.

Answer 2

Here is the solution you've been waiting for!

let randomNumber = Math.random() * 500;
let widthValue = randomNumber.toString();
document.getElementById("square").style.width = widthValue + "px";
document.getElementById("square").style.height = widthValue + "px";

#square {
  background: red;
}

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

I hope this provided code snippet helps you with your project.

Answer 3

Answer №2

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

for (var element of document.getElementsByClassName("random")){
  element.style.width = generateRandomSize();
  element.style.height = generateRandomSize();
}

#box1 {
  background-color: blue;
}

#box2 {
  background-color: red;
}

#box3 {
  background-color: green;
}

<div id="box1" class="random"></div>
<div id="box2" class="random"></div>
<div id="box3" class="random"></div>

Answer 4

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

for (var element of document.getElementsByClassName("random")){
  element.style.width = generateRandomSize();
  element.style.height = generateRandomSize();
}

#box1 {
  background-color: blue;
}

#box2 {
  background-color: red;
}

#box3 {
  background-color: green;
}

<div id="box1" class="random"></div>
<div id="box2" class="random"></div>
<div id="box3" class="random"></div>

Answer 5

Answer №3

If you're looking to randomly set both the height and width, you can try this method. However, if you want them to be the same, you can simply use the same random number:

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

function reset_square() {
    document.getElementById("square").style.width = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100

    document.getElementById("square").style.height = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100
}

function reset_position(){
    document.getElementById("square").style.top = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100

    document.getElementById("square").style.left = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100
}

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

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

I hope this explanation helps you with your coding needs :)

Answer 6

If you're looking to randomly set both the height and width, you can try this method. However, if you want them to be the same, you can simply use the same random number:

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

function reset_square() {
    document.getElementById("square").style.width = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100

    document.getElementById("square").style.height = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100
}

function reset_position(){
    document.getElementById("square").style.top = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100

    document.getElementById("square").style.left = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random number between 1 and 100
}

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

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

I hope this explanation helps you with your coding needs :)

Answer 7

Answer №4

initialize();
function initialize(){
    setup_square();
    set_initial_position();
}

function setup_square() {
    document.getElementById("square").style.width = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random width value between 1 and 100 pixels

    document.getElementById("square").style.height = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random height value between 1 and 100 pixels
}

function set_initial_position(){
    document.getElementById("square").style.top = Math.floor(Math.random() * 100) + 1 + "px"; 
    // sets the square's top position to a random value between 1 and 100 pixels

    document.getElementById("square").style.left = Math.floor(Math.random() * 100) + 1 + "px"; 
    // sets the square's left position to a random value between 1 and 100 pixels
}

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

<div id="square">This is a customized square</div><br>
<button onclick="initialize()">Initialize</button>

Answer 8

initialize();
function initialize(){
    setup_square();
    set_initial_position();
}

function setup_square() {
    document.getElementById("square").style.width = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random width value between 1 and 100 pixels

    document.getElementById("square").style.height = Math.floor(Math.random() * 100) + 1 + "px"; 
    // generates a random height value between 1 and 100 pixels
}

function set_initial_position(){
    document.getElementById("square").style.top = Math.floor(Math.random() * 100) + 1 + "px"; 
    // sets the square's top position to a random value between 1 and 100 pixels

    document.getElementById("square").style.left = Math.floor(Math.random() * 100) + 1 + "px"; 
    // sets the square's left position to a random value between 1 and 100 pixels
}

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

<div id="square">This is a customized square</div><br>
<button onclick="initialize()">Initialize</button>

I have a desire to use Javascript to control CSS styles

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

unexpected automatic scrolling that occurs when hovering over an element

Developing an interactive input field using JavaScript's Document Object Model (DOM)

Problem with Internet Explorer version 9 and above and the Flip Card feature

Activate an asynchronous request within a dropdown menu that was loaded using ajax

Having trouble with the onClick function in React?

Display time series data from PHP by utilizing Flot Charts in jQuery

The use of fs.writeFileSync is invalid and will not work for this operation

Using the power of Javascript's jQuery library: the fantastic ".on()" Event Handler

The padding on the button inside the v-card is not being applied as expected

Replace the hyphen with a comma using JavaScript

drag items on your smartphone with ease

unable to display data through the web service

Issue: In an Angular electron app, a ReferenceError is thrown indicating that 'cv' is

Setting up a function in React to utilize an image stored in state

`I'm having difficulty transferring the project to Typescript paths`

Create a speech bubble using only CSS, featuring a partially see-through background and a stylish border

Tips for dynamically changing the class of a form field in jQuery when it is empty

The functionality of ng-show becomes compromised when used in conjunction with ng-animate

Send a Date Object through an Event Emitter to be used in a Date Picker

How to arrange three buttons in a row using CSS styling