javascript - 获取相对单位值

Question

我想知道如何获得相对单位值 例如，我有一个宽度为其视口(viewport)宽度 80% 的元素，我想使用 javascript 获取宽度值

console.log(Number.parseInt(document.getElementById('maxwidth').style.width));

<div id="maxwidth" style="width: 80vw;"></div>

Answer 1

相对宽度

你应该自己计算一个元素的相对宽度，宽度百分比。使用此功能来执行此操作。

function getRelativeWidth(element) {
  var offsetParent = element.offsetParent || element;
  return ((element.offsetWidth / offsetParent.offsetWidth) * 100).toFixed(3) + '%';
}

var element = document.getElementById('maxwidth')
console.log(getRelativeWidth(element))

<div id="maxwidth" style="width: 80vw;"></div>

---

offsetWidth

使用此函数获取元素的宽度，包括其边框和填充。

function getOffsetHeight(element) {
  return element.offsetWidth
}

var element = document.getElementById('maxwidth')
console.log(getOffsetHeight(element))

<div id="maxwidth" style="width: 80vw;"></div>

---

clientWidth

使用此函数获取非内联元素的宽度，不包括其边框和边距，但包括其填充。

function getClientWidth(element){
    return element.clientWidth
}

var element = document.getElementById('maxwidth')
console.log(getClientWidth(element)) 

<div id="maxwidth" style="width: 80vw;"></div>