CSS/JS : How to Retrieve a numerical value from a CSS property in JS and modify it?

Question

I've tried looking around but was not able to find a clear/easy answer.

Let's say I want to retrieve some value (size) in px for a CSS style sheet like this :

#block{
  width: 150px;
  height: 150px;
  background-color: #f00;
  position: absolute;
  left: 0;
  top: 0;
}

I've tried

let block = document.getElementById("block");
const square = window.getComputedStyle(block)
const width = square.getPropertyValue('width');
block.style.width = size.value * width;

But it returns a string. I'd like to modify the value in px dynamically with JS. Is there a better way or should I create a substring, then convert it to a number?

EDIT : I've also tried

let width = block.offsetWidth;

But the result on my page is not at all functional.

It is possible to get width, and height in numbers using clientWidth, clientHeight properties or ofsetWidth (with padding/margings): block.clientHeight. — aleks korovin
– aleks korovin, Commented Nov 25, 2021 at 5:37
Anyway when you set size for an element you with style.width you have to set CSS units, so conversion to string is needed: ${size.value * block.offsetHeight}px — aleks korovin
– aleks korovin, Commented Nov 25, 2021 at 5:42
It has the same effect as block.offsetWidth . My page is not dynamically responsive. If I was to manually enter 150 as the width and height, it results in a very responsive page, instead of trying to grab the value. I'm not exactly sure why. — m3.b
– m3.b, Commented Nov 26, 2021 at 0:22

Anonymous · Accepted Answer · 2021-11-25 05:47:51Z

1

Try This :

   let element = document.getElementById('block');
   let positionInfo = element.getBoundingClientRect();
   let height = positionInfo.height;
   let width = positionInfo.width;

answered Nov 25, 2021 at 5:47

Anonymous

5473 silver badges6 bronze badges

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

Comments

m3.b · Accepted Answer · 2021-11-26 01:03:12Z

I found the solution. Declaring the variables before the function but not inside the function did make my result responsive!

I played around with position and scopes of those newly called variables, and I was finally able to make what I want work. I'll also add some of my code.

Added code :

    size.addEventListener('input', function () {
        block.style.width = size.value * width + 'px';
        block.style.height = size.value * height + 'px';
    });

Initially, I was putting my declaration of my variable

    const width = block.clientWidth;
    const height = block.clientHeight;

Inside of the function. This causes my page not to be really responsive, but caused some "delay" in the adjustments. When I did put these declarations outside of the function, before, it did work properly.

    // This solution works next 3 lines. only setting CONST works. Retrieves number value.
    // let square = block.getBoundingClientRect();
    // const height = square.height;
    // const width = square.width;

    // This solution. Needs to be outside of the function. Works with either let or const
    // let width = block.offsetWidth;
    // let height = block.offsetHeight;

// This way also works, only if outside of the function
    const width = block.clientWidth;
    const height = block.clientHeight;

All of the above works if called before the function but not inside.

Thank you for your help!

Collectives™ on Stack Overflow

CSS/JS : How to Retrieve a numerical value from a CSS property in JS and modify it?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related