change inline class Style property using javascript/jquery

Question

How to change inline class Style property using javascript/jquery. for example:

<style>
.iexp-info-bar-body {
    background-color: #000000;
}
</style>
<div class="iexp-info-bar-body">
//data
</div>

i want to change background-color property of a class .iexp-info-bar-body #000000 to #C04848 .

Please not that i know inline css technique/using !important keyword to change color.
But i want to change all the occurance of a class .iexp-info-bar-body property ie i need a result like

<style>
.iexp-info-bar-body {
    background-color: #C04848;
}
</style>
<div class="iexp-info-bar-body">
//data

can't you just append one other class with bg-color property? — teju c
– teju c, Commented Dec 5, 2017 at 13:03
If you want to change ALL occurrences, why can't you add a static CSS for class .iexp-info-bar-body in your css files? — Jagdeep Singh
– Jagdeep Singh, Commented Dec 5, 2017 at 13:04
javascript can be used to manipulate DOM elements and not to CSS or script — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Dec 5, 2017 at 13:08
@BhushanKawadkar It can be used to manipulate any element content, just like style element — A. Wolff
– A. Wolff, Commented Dec 5, 2017 at 13:09
finally i will take $("#myidval").innerHtml() to get entire html .thats why i choose this method .also remove class .iexp-info-bar-body based on condition later .. — Jishnu Chandran
– Jishnu Chandran, Commented Dec 5, 2017 at 13:10

Zyigh · Accepted Answer · 2017-12-05 13:13:31Z

I had a very good teacher that taught us to change the class :

First, it really helps to be fully aware of "what is my initial state" AND "what is my final state"

This is pretty useful if your design change and you have to implement some transitions. And you will never have to access your JavaScript files to change any css code.

Then think about conflicts

Today, you only have one element depending on that class, but what if you have 100 000 tomorrow ?

Maybe try to make another class is the simplest way to achieve what you want to do.

<style>
    .iexp-info-bar-body {
        background-color: #000000;
    }
    .changed {
        background-color: #ff69b4;
    }
</style>

<div class="iexp-info-bar-body">
//data
</div>

<script>
    var all = document.querySelectorAll('.iexp-info-bar-body');
    for (var i = 0, length = all.length; i < length; i++) {
        all[i].classList.remove('iexp-info-bar-body');
        all[i].classList.add('changed');
    }
</script>

Of course this is very primitive and you can improve it in many ways

i know this way to alter css.how can i achieve with out creating "changed "
I don't really see a way of doing that properly. Maybe by loading another css file which would have the changes you need but that seems quite heavy compared to what you need. The main question is why you'd need that ? Maybe think about generating your css in the backend side.

bitshift · Accepted Answer · 2017-12-05 13:08:58Z

0

Have a look at a library called jss. Added or modifying classes is as simple as

jss.set('.demo', {
    'font-size': '15px',
    'color': 'red'
});

This uses the style technique in the header to define the classes similar to the second code block in your question.

answered Dec 5, 2017 at 13:08

bitshift

5142 silver badges14 bronze badges

1 Comment

Jishnu Chandran Over a year ago

I tried but it doesn't replace already existing class property

Collectives™ on Stack Overflow

change inline class Style property using javascript/jquery

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related