Display the value of CSS property in HTML using JavaScript

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;
}

In practice, the width of the progress bar will depend on some other data. You can treat the progress bar and the value in text as both different display methods for the underlying data. So, for example, you will have a variable that says currentProgress = 60. Based on that, you will make the progress bar take up 60% width, and you will also know to display the number "60" in the progress bar. Example: jsfiddle.net/h5xgfyrp/6 — Matis Lepik
– Matis Lepik, Commented Jul 26, 2016 at 18:06

Angel Politis · Accepted Answer · 2016-07-26 21:46:13Z

3

▶ 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:

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.
You can put #progress outside of the container as a sibling and put display: inline-block to both of them.

edited Jul 26, 2016 at 21:46

answered Jul 26, 2016 at 18:13

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Varun Over a year ago

Is there anyway i can show the value percentage next to the progress bar?

Grizzly Over a year ago

@VarunNuthalapati check my answer as to why that might not be a good idea

Angel Politis Over a year ago

Yes, you can use: display: inline-block in #progress in your CSS.

Grizzly Over a year ago

@AngelPolitis ahh you are using getPropertyValue, whereas I am using the actual width property. Idk how I didn't notice that

Angel Politis Over a year ago

@BviLLe_Kid that's why I'm using getPropertyValue :)

|

spencer.sm · Accepted Answer · 2016-07-26 18:07:58Z

1

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/

answered Jul 26, 2016 at 18:07

spencer.sm

20.8k10 gold badges86 silver badges98 bronze badges

Comments

Grizzly · Accepted Answer · 2016-07-26 18:25:08Z

1

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.

edited Jul 26, 2016 at 18:25

answered Jul 26, 2016 at 18:12

Grizzly

5,9559 gold badges63 silver badges117 bronze badges

1 Comment

Varun Over a year ago

I'm trying to implement the progress bar just using javascript and you're using jquery. But thanks for your answer, it works. I'm using javascript for now.

slashsharp · Accepted Answer · 2016-07-26 18:10:27Z

0

You can get the width value using

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

answered Jul 26, 2016 at 18:10

slashsharp

2,8332 gold badges22 silver badges26 bronze badges

Comments

Muhammad Naeem · Accepted Answer · 2016-07-26 18:31:48Z

0

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);

answered Jul 26, 2016 at 18:31

Muhammad Naeem

1213 bronze badges

Collectives™ on Stack Overflow

Display the value of CSS property in HTML using JavaScript

5 Answers 5

10 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related