Modifying CSS Class Property Values on the Fly With JavaScript/Jquery

Change CSS class properties with jQuery

You can't change CSS properties directly with jQuery. But you can achieve the same effect in at least two ways.

Dynamically Load CSS from a File

function updateStyleSheet(filename) {
    newstylesheet = "style_" + filename + ".css";

    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");

        css.attr({
          id: "dynamic_css",
          rel:  "stylesheet",
          type: "text/css",
          href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href",newstylesheet);
    }
}

The example above is copied from:

How To Switch CSS Files On-The-Fly Using jQuery

Dynamically Add a Style Element

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.red{background:green;}');

The example code is copied from this JSFiddle fiddle originally referenced by Alvaro in their comment.

How to change a property of a CSS class dynamically using javascript (no JQuery)

I don't know what triggers your animation, but let's say it's a click on each of the .sbox elements.

As you can't change the CSS, you can instead use the script to add an inline style height using .style.height.

Here is a snippet:

var sboxes = document.querySelectorAll(".sbox");
sboxes.forEach(function(box, index){  box.onclick = function(){    box.style.height = "360px";    box.className = 'sboxopen';  }})

.sbox {  height: 0px;  transition: height 1s ease-out;  overflow: hidden;  border: 8px solid gray; /* Added for better visibility */}
.sboxopen {  height: 130px;  transition: height 1s ease-out;  overflow: hidden;  border: 8px solid gray; /* Added for better visibility */}

<div class='sbox'>Box 1</div><br><div class='sbox'>Box 2</div><br><div class='sbox'>Box 3</div>

change CSS class on the fly using Jquery

Dz1 Answered

From what you just said, use "removeClass" to remove the one you want
to remove, then "addClass" to add the one that will change the
background. –

javascript modify css class property while knowing only the class' name

Following your response in the comment, if the element is being generated by Jquery, then the library is most likely installed. Here is something you can try to select it via Jquery and change the require property.

$(document).ready( function(){    
$('.my-class-name').css('display', 'block');
});

Substituting 'block' for whatever setting you require.

If Jquery is included it should do what your require on page load. You can also attach it to other events as well.

$(document).ready(function(){
$('.my-class-name').click(classClicked);
})

function classClicked(){
$(this).css('display','block')
}

how to dynamically change the property of css using jquery

That's because you pass to css method an object containing property property. In this case it's better to pass two arguments to css method:

function changeProperty(mine , property , value){
    $(mine).css(property, value);
}

However, if you want to pass an object, you can dynamically build it:

function changeProperty(mine , property , value){
    var obj = {};
    obj[property] = value;
    $(mine).css(obj);
}

Another improvement is to use this value inside of the function (that is the same with mine in this case):

function changeProperty(property , value){
    $(this).css(...);
}

Then in HTML you will have changeProperty.call(this, "font", "Arial").

.css( propertyName, value )
Set one or more CSS properties for the set of matched elements.
propertyName: A CSS property name.
Type: String
value: A value to set for the property.
Type: String or Number