Question

我想在javascript中更改<div>的宽度尺寸。我是HTML和javascript的新手，因此我很难这样做。

我正在做的是为游戏创建进度条。我设法使用<progress>，但我想要更多的灵活性。

所以我用过这个：

function botHealth(){
var meter = document.getElementsByClassName("meter")[0]; //If it's the first and only instance of 'meter'
var span = meter.getElementsByTagName("span")[0];
span.style.width = "calc("+span.style.width+"% - 10%)"}

<div class="meter"> <span style="width: 25%"></span> </div>

我从这个网站here

得到了这个想法

Answer 1

你可以这样做：

var meter = document.getElementsByClassName("meter")[0]; //If it's the first and only instance of 'meter'
var span = meter.getElementsByTagName("span")[0];

span.style.width = "50%";

如果您想计算某些内容，可以使用css calc函数。

E.g：

span.style.width = "calc(50% + 15%)";

然而isn't fully supported on older browsers。

要远离自身，你可以这样做：

span.style.width = "calc("+span.style.width+"% + 20%)";

如果你正在调用一个函数，它应该是这样的：

（按钮是一个组成变量，可以是......按钮）

button.onclick = function(){
  var new_width = span.style.width;

  new_width = "calc("+new_width+"% - 10%)";
}

Answer 2

给你的班级一个班级，例如meterProgress，这不是必要的，但无论如何它可能会有所帮助

<div class="meter">
    <span class="meterProgress"></span>
</div>

现在在javascript中你需要找到范围并改变其宽度

var progressValue = 30;
var meterProgress = document.getElementsByClassName("meterProgress")[0];
meterProgress.style.width = progressValue.toString() + "%";

你也可以使用jquery，因为它有助于这种操作，然后它就会如此简单（即使没有为跨度指定类

var progressValue = 30;
$('.meter>span').css('width', progressValue.toString() + "%")

改变div宽度

2 个答案: