Adjust the increment of the CSS class property

Question

Adjust the increment of the CSS class property

Just a quick query! I'm attempting to adjust the css width property through JavaScript in this manner:

document.getElementById("progressvalue").style.width = "80%";

.progress {
  width: 100%;
  max-width: 500px;
  border: 3px solid black;
  height: 20px;
  padding: 1px;
}

#progressvalue {
  height: 100%;
  width: 0%;
  background-color: #05e35e;
}

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

Rather than setting it to 80% in the JavaScript code, I would like to increase the width by 20%. In other words, (width = width + 20%). I want to apply this adjustment only once (so I can reuse it under different conditions), hence the need for this approach (width = width + 20%)

javascript html css

Answer 1

Answer №1

If you want to retrieve the numerical portion of an element's style.width property, you can extract it and add it to your step value (e.g., 20%).

const step = 5;

const updateProgress = () => {
  const currentWidth = Number(document.getElementById("progressvalue").style.width.replace("%", ""));
  
  if (currentWidth >= 100) {
    return;
  }
  else {
    document.getElementById("progressvalue").style.width = `${currentWidth + step}%`;
  } 
}

You can test this functionality on CodePen.

Answer 2

If you want to retrieve the numerical portion of an element's style.width property, you can extract it and add it to your step value (e.g., 20%).

const step = 5;

const updateProgress = () => {
  const currentWidth = Number(document.getElementById("progressvalue").style.width.replace("%", ""));
  
  if (currentWidth >= 100) {
    return;
  }
  else {
    document.getElementById("progressvalue").style.width = `${currentWidth + step}%`;
  } 
}

You can test this functionality on CodePen.

Answer 3

Answer №2

If you're looking to add some animation effects, using recursion with setTimeout is a great approach:

function animateProgress(value) {
    value += 25;

    document.getElementById("progress").style.width = value + "%";
    if (value < 100) // Stop the animation when progress bar is full
        setTimeout(function () {
            animateProgress(value);
        }, 1500)
}
animateProgress(0); // Initiate the animation

Answer 4

If you're looking to add some animation effects, using recursion with setTimeout is a great approach:

function animateProgress(value) {
    value += 25;

    document.getElementById("progress").style.width = value + "%";
    if (value < 100) // Stop the animation when progress bar is full
        setTimeout(function () {
            animateProgress(value);
        }, 1500)
}
animateProgress(0); // Initiate the animation

Answer 5

Answer №3

There will be a 20% increase every half second.

let percentage = 0;

setInterval(() => 
{
    if(percentage > 100) {
        clearInterval();
        return;
    }
    document.getElementById("progressbar").style.width = percentage + "%";
    percentage += 20;
}, 500);

Answer 6

There will be a 20% increase every half second.

let percentage = 0;

setInterval(() => 
{
    if(percentage > 100) {
        clearInterval();
        return;
    }
    document.getElementById("progressbar").style.width = percentage + "%";
    percentage += 20;
}, 500);

Answer 7

Answer №4

Here is a solution for you:

    var progressElement = document.getElementById("progressvalue");

    var elementWidth = progressElement.style.width;

    var newWidth = `${20+parseInt(elementWidth.substring(0, elementWidth.length-1))}%`
    progressElement.style.width=newWidth;

This code assumes that the initial width of the element is set in percentage format.

Answer 8

Here is a solution for you:

    var progressElement = document.getElementById("progressvalue");

    var elementWidth = progressElement.style.width;

    var newWidth = `${20+parseInt(elementWidth.substring(0, elementWidth.length-1))}%`
    progressElement.style.width=newWidth;

This code assumes that the initial width of the element is set in percentage format.

Answer 9

Answer №5

<button type="button" id="changeButton" onclick="increaseWidth()">Adjust the size</button>

<script>
function increaseWidth() {
  let bar = document.getElementById("progressbar");
  let style = window.getComputedStyle(bar, null).getPropertyValue('width');
  let currentWidth = parseFloat(style);
  bar.style.width = (currentWidth + 15) + '%';
}
</script>

Answer 10

<button type="button" id="changeButton" onclick="increaseWidth()">Adjust the size</button>

<script>
function increaseWidth() {
  let bar = document.getElementById("progressbar");
  let style = window.getComputedStyle(bar, null).getPropertyValue('width');
  let currentWidth = parseFloat(style);
  bar.style.width = (currentWidth + 15) + '%';
}
</script>

Answer 11

Answer №6

Give it a shot

//clientWidth: retrieves the width of an element's content
var progress_width = document.getElementById("statusbar").clientWidth

document.getElementById("statusbar").style.width = progress_width + (10*progress_width/100) +'px' ;

Answer 12

Give it a shot

//clientWidth: retrieves the width of an element's content
var progress_width = document.getElementById("statusbar").clientWidth

document.getElementById("statusbar").style.width = progress_width + (10*progress_width/100) +'px' ;

Answer 13

Answer №7

To achieve the desired outcome, ascertain the present width of the

<div id="progressvalue"></div>

element and store it in a variable. Proceed to augment this value by 20 before assigning the modified result back to the same

<div id="progressvalue"></div>

.

Answer 14

To achieve the desired outcome, ascertain the present width of the

<div id="progressvalue"></div>

element and store it in a variable. Proceed to augment this value by 20 before assigning the modified result back to the same

<div id="progressvalue"></div>

.

Adjust the increment of the CSS class property

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Are there any concerns about memory leaks when using recursive JavaScript Objects?

Divide the strings within an array

The value of an object is replaced when a general method is called for the second time

Ajax requests across different domains are unsuccessful, even when attempting to access a file on

Can a secondary non-static, privileged function be implemented in a jQuery Plugin?

Ajax is coming back with a value that is not defined

Discovered an issue with Sentry debugging where a lengthy string is being returned as undefined

Input the selected checkbox options into the designated text field

How can I avoid using the appendTo method in jQuery?

The alignment of the label on the Watu Quiz does not match with the Radio Button

You are unable to assign mutations in Vuex

Challenges Arising from CGI Scripts

Elevate the element from the choice API to the organization API using this.$parent

Ways to hide notifications by setting a timer while keeping the delete option visible

Incorporating rounded corners to an embedded YouTube video

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

Google Chrome - flexbox - container element

Guide to creating varying component sizes using ReactJS and Styled Components

Combining Files with Gulp.js and Handling File Names

Is there a way for me to identify the vertical gaps in my code using JavaScript?