Divide given value by .style.width in Javascript

Question

I would need to divide a value given by .style.width function in Javascript. My code looks like this:

    var x = document.getElementsByClassName("item");
    var i;

    var v = x[0].style.width;

In variable 'v' I have some value in pixels, e.g. 200px width. I would need to divide this value by 2 to get 100px. But this formula doesn't work: var v = x[0].style.width / 2;

What am I doing wrong? Thanks for help.

var v = parseInt(x[0].style.width) / 2;

Robin Zigmond
– Robin Zigmond

2020-05-09 08:42:03 +00:00
Commented May 9, 2020 at 8:42 — Robin Zigmond
– Robin Zigmond, Commented May 9, 2020 at 8:42
Maybe var v = x[0].clientWidth / 2 + "px";

GOTO 0
– GOTO 0

2020-05-09 08:44:48 +00:00
Commented May 9, 2020 at 8:44 — GOTO 0
– GOTO 0, Commented May 9, 2020 at 8:44

brk · Accepted Answer · 2020-05-09 08:46:21Z

1

width will be string. Convert it to number before dividing. This example uses getComputedStyle to get actual width of a dom element

let elem = document.getElementById('test');
let compStyles = window.getComputedStyle(elem);
const widthInteger = parseInt(compStyles.width, 10);
const halfWidth = widthInteger / 2;
console.log(halfWidth)

.test {
  height: 200px;
  width: 200px;
  border: 1px solid green;
}

<div class='test' id='test'></div>

answered May 9, 2020 at 8:46

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

Divide given value by .style.width in Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related