CODEWITHSUNDEEP
javascripthtmlcss
Varun
Varun

Reputation: 3735

Display the value of CSS property in HTML using JavaScript

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

Upvotes: 3

Views: 332

Answers (5)

Angel Politis
Angel Politis

Reputation: 11313

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

Upvotes: 3

Muhammad Naeem
Muhammad Naeem

Reputation: 121

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

Upvotes: 0

Grizzly
Grizzly

Reputation: 5943

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.

Upvotes: 1

slashsharp
slashsharp

Reputation: 2833

You can get the width value using

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

Upvotes: 0

spencer.sm
spencer.sm

Reputation: 20544

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/

Upvotes: 1

Related Questions