改變div寬度

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>

我的想法從這個站點在這里

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函數。

例如：

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

但是舊瀏覽器並不完全支持這一點 。

要把它從它自己拿走，你可以這樣做：

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() + "%")