使用JavaScript在HTML中顯示CSS屬性的值

Question

我使用HTML和CSS實現了一個進度條。 進度條的值取決於內部類的寬度（在此代碼中：bar-fill）。 我想在我的樣式中訪問此width屬性並將其顯示在進度條旁邊。

工作代碼： https ： //jsfiddle.net/nvarun123/h5xgfyrp/3/

HTML代碼：

<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
</div>

CSS代碼：

.container{
  width:300px;
}
.bar{
  width:100%;
  background-color: #E3E3E3;
  border-radius:10px;
}

.bar-fill{
  height:15px;
  display:block;
  background:#0073CF;
  width:60%;
  border-radius:7.5px;
  -webkit-transition: width 0.8s ease;
  transition: width 0.8s ease;
}

Answer 1

▶首先，您需要添加一個顯示進度的HTML元素：

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

▶然后，您可以使用以下JavaScript代碼：

var
    /* The elements */
    bar = document.getElementsByClassName("bar")[0],
    barFill = document.getElementsByClassName("bar-fill")[0],
    progress = document.getElementById("progress"),

    /* The bar's total width */
    barWidth = window.getComputedStyle(bar, null).getPropertyValue("width"),

    /* How much of the bar is filled */
    barFillWidth = window.getComputedStyle(barFill, null).getPropertyValue("width"),

    /* Create the percentage */
    pct = 100 * (parseFloat(barFillWidth) / parseFloat(barWidth)) + "%";

/* Set the innerHTML of our progress element */
progress.innerHTML = pct;

查看此小提琴或以下片段以獲得直觀表示。

片段：

 (function() { var bar = getByClass("bar"), barFill = getByClass("bar-fill"), progress = document.getElementById("progress"), barWidth = getWidth(bar), barFillWidth = getWidth(barFill), pct = 100 * barFillWidth / barWidth + "%"; progress.innerHTML = pct; function getWidth(element) { return parseFloat(window.getComputedStyle(element, null).getPropertyValue("width")); }; function getByClass(className) { return document.getElementsByClassName(className)[0]; } })(); 

 .container { display: inline-block; width: 300px; } .bar { width: 100%; background-color: #E3E3E3; border-radius: 10px; } .bar-fill { height: 15px; display: block; background: #0073CF; width: 60%; border-radius: 7.5px; -webkit-transition: width 0.8s ease; transition: width 0.8s ease; } #progress { position: relative; bottom: 3px; display: inline-block; } 

 <div class="container"> <div class="bar"> <span class="bar-fill"></span> </div> </div> <div id="progress"></div> 

---

要將標簽放在進度條旁邊，您可以執行許多操作。 我在下面提到其中兩個：

1. 您可以將position: absolute放到#progress以使其脫離正常流程，以便它可以與.bar 'inline' ，因為#progress當前占據容器寬度的100％。
2. 您可以將#progress放在#progress外部作為兄弟，並將display: inline-block放到它們中。

Answer 2

你可以計算的百分比寬度.bar-fill除以它的寬度和寬度.bar

var percent = ($('.bar-fill').width() / $('.bar').width()) * 100

請參閱： https ： //jsfiddle.net/fve4qszo/

Answer 3

是的，你可以實現你想要的，但是當你說：

並將其顯示在進度條旁邊。

因為如果您顯示進度條旁邊的百分比，則進度條的寬度不再是真正的 60％..它會下降幾個百分點，以允許您顯示其旁邊的欄的百分比。 因此，請注意，請注意並注意您要完成的任務，否則這可能會令人沮喪。

以下是用於獲取寬度百分比的公式：

var n = $('.bar-fill').width() / $('.bar-fill').parent().width() * 100;

這是一個JSfiddle 。

如果這是您正在尋找的，請告訴我。

Answer 4

您可以使用獲取寬度值

document.querySelector('.bar-fill').offsetWidth

Answer 5

首先在html中添加jquery腳本鏈接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="container">
<div class="bar">
<span class="bar-fill"></span> 
</div>
</div>
Test

在你的javascript中，ypu可以通過以下方式獲得bar-fill類的寬度：

var width = $(".bar-fill").css('width');
$(".container").prepend(width);