Change css from jquery

Question

Hello I have this CSS code:

.bar .progress-line.html span {
  width: 78%;
}

How can I change the width from javascript? I have tried many ways like

$(".bar .progress-line.html span").css("width", "10%");

But nothing is found.

I also tried this:

$(".bar .progress-line.html span").css("width", "10%");

but nothing happens.

Need to see the relevant HTML as well. One way you could do this is to edit your question to include a stack snippet. https://stackoverflow.com/help/minimal-reproducible-example — Brett Donald, Nov 29 '22 at 00:59
this is the example, and i have take the first line ! or wich is better to edit from javascript ! https://codepen.io/Prashal9499/pen/oNWzPqR — SirecStudio, Nov 29 '22 at 01:12
Your code works. (And your two examples are the same.) Is [this](https://stackoverflow.com/a/21709814/1171702) what you mean? — wazz, Nov 29 '22 at 02:43
you need add library cnd jquery, after then you code jquery :$(document).ready(function(){ $(".html span").css("width", "20%"); }); — skipperhoa, Nov 29 '22 at 02:59

score 0 · Accepted Answer · answered Nov 29 '22 at 02:55

0

If you're trying to change the text, see the link in my comment to your original post.

You can do it manually like this:

New class:

.progress-line.html span.change::after {
    content: "55%";
}

jQuery

$(".progress-line.html span").css("width", "55%");
$(".progress-line.html span").addClass("change");

answered Nov 29 '22 at 02:55

wazz

In the code from codepen, i want can change the widht from javascript, i have tried you example add the new class in css, and try change from java with jquery but nothing happen ! :-\ – SirecStudio Nov 29 '22 at 03:09
Make sure you use the settings in the JS section and *add jQuery*. – wazz Nov 29 '22 at 03:16
https://jsfiddle.net/Sirec/tz2L7hrd/3/ tested it here ! :(( – SirecStudio Nov 29 '22 at 03:17
jQuery is not included until you add it under settings (*Resources* in jsfiddle). – wazz Nov 29 '22 at 03:19
Oh yes works thanks you very much, and the text how i can change it ? – SirecStudio Nov 29 '22 at 03:23
Answer is above -- but only manual. If the percentage is always changing, it's complicated. See the link I put in your original question. – wazz Nov 29 '22 at 03:25

score -1 · Answer 2 · answered Nov 29 '22 at 00:57

-1

You have to set a comma in between the class names while targeting multiple elements. Here is an updated version of what you have done so far.

$(".bar, .progress-line, .html, span").css("width", "10%");

answered Nov 29 '22 at 00:57

qamar

1

This is not the same selector as what the OP uses. It'll modify other elements unrelated to the original CSS. – Lie Ryan Nov 29 '22 at 01:02
You definitely don’t want to change all spans… you’re making a global statement – Dom Nov 29 '22 at 02:22

2 Answers2