如何在javascript中以百分比的宽度添加百分比？

Question

我正在尝试增加进度条的填充量。我使用下面的代码来说，无论何时调用函数nxt()，它都会增加div占用的百分比3.3％（例如：宽度为2.0％，增加3.3％，得到5.3％）。我目前正在使用以下代码尝试执行此操作：

document.getElementById("pb").style.width = 
`${document.getElementById("pb").style.width + 3.3}` ;

（id为pb的div的宽度为0％）

但这不起作用。 document.getElementById("pb").style.width + 3.3输出0％3.3，当我尝试document.getElementById("pb").style.width + 3.3%时，它无法正常工作。有人可以帮我弄明白我怎么能得到我想要的百分比吗？谢谢！

Answer 1

如果您要分配%s，style.width会返回一个字符串，其末尾包含%。您需要剥离%，这样您就可以获得数字百分比，为其添加一个数字，并再次将其分配给width属性：

const pbStyle = document.getElementById("pb").style;
function increment() {
  const percentage = Number(pbStyle.width.slice(0, -1));
  const newPercentage = Math.min(percentage + 3.3, 100);
  pbStyle.width = `${newPercentage}%`;
  console.log(pbStyle.width);
  if (newPercentage < 100) setTimeout(increment, 100);
}
increment();

#pb {
  background-color: yellow;
}

<div id="pb">progress</div>

或者，您可以将当前百分比保留在变量中：

const pbStyle = document.getElementById("pb").style;
let percentage = 0;
function increment() {
  percentage = Math.min(percentage + 3.3, 100);
  pbStyle.width = `${percentage}%`;
  console.log(pbStyle.width);
  if (percentage < 100) setTimeout(increment, 100);
}
increment();

#pb {
  background-color: yellow;
}

<div id="pb">progress</div>

Answer 2

假设当你说宽度增加3.3％时，你的意思是将'pb'元素的宽度增加3.3％的父元素。

试试这个：

document.getElementById("pb").style.width = 
    document.getElementById("pb").clientWidth + 
    0.033*document.getElementById('parent-div').clientWidth;

Answer 3

您显然是在连接您的值，而不是添加。您可以在开发人员工具中查看语句document.getElementById("pb").style.width返回一个字符串。所以你能做的是：

var newWidth = parseFloat(document.getElementById("pb").style.width) + 3.3;
document.getElementById("pb").style.width = newWidth + '%';

Answer 4

将宽度解析为float，然后添加所需的量：

document.getElementById("pb").style.width = (parseFloat(document.getElementById("pb").style.width) + 3.3) + '%';

Answer 5

首先需要获取进度条的宽度并将其与0.033相乘，这将为您提供进度条的3.3％宽度。

改为：

document.getElementById("pb").style.width =  (parseFloat(document.getElementById("pb").style.width) * 0.33 ) + parseFloat(document.getElementById("pb").style.width);