使用JavaScript在HTML中显示CSS属性的值

Question

I implemented a progress bar using HTML and CSS. The value of the progress bar depends on the width of the inner class (in this code: bar-fill). I want to access this width property in my styling and display it next to the progress bar.

Working Code: https://jsfiddle.net/nvarun123/h5xgfyrp/3/

HTML code:

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

CSS code:

.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

▶ First, you need to add an HTML element that will show the progress:

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

▶ Then, you can use the following JavaScript code:

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;

Check out this fiddle or the following snippet for a visual representation.

Snippet:

 (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> 

---

To position the label next to the progressbar , there are a lot of things you can do. I'm mentioning two of them below:

1. You can put position: absolute to #progress to get it out of the normal flow, so that it can be 'inline' with .bar as the bar currently occupies 100% of the container's width.
2. You can put #progress outside of the container as a sibling and put display: inline-block to both of them.

Answer 2

You can calculate the percent width of the .bar-fill by dividing it's width and the width of .bar

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

See: https://jsfiddle.net/fve4qszo/

Answer 3

Yes you can achieve what you are looking for, but there could be some trouble when you say:

and display it next to the progress bar.

Because if you display the percentage next to the progress bar, then the width of the progress bar is no longer a true 60%.. it goes down a few percentage points to allow you to display the percentage of the bar next to it. So, with that said please be careful and be mindful of what you are trying to accomplish or else this could become frustrating.

Here is the formula that is used to get the width percentage:

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

Here is a JSfiddle .

Let me know if this is what you are looking for.

Answer 4

您可以使用获取宽度值

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

Answer 5

First add the jquery script link in your html:

<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

In your javascript ypu can get the width of bar-fill class by following:

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