Разделите полученное значение на .style.width в Javascript

Question

Мне нужно разделить значение, заданное функцией .style.width, на Javascript. Мой код выглядит так:

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

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

В переменной 'v' у меня есть некоторое значение в пикселях, например ширина 200 пикселей. Мне нужно разделить это значение на 2, чтобы получить 100 пикселей. Но эта формула не работает: var v = x[0].style.width / 2;

Что я делаю не так? Спасибо за помощь.

Answer 1

width будет строкой. Перед делением преобразуйте его в число. В этом примере используется getComputedStyle , чтобы получить фактическую ширину элемента dom

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>