Javascript / jQuery change inline style values

Question

I have an inline css in my page:

<style id="abc">
 .player-holder{
    position:relative;
    width:100%;
    height:40px;
 }
 .icon-color{
    color:#fff;
   -webkit-transition: color 0.3s ease-in-out;
   transition: color 0.3s ease-in-out; 
 }
 .icon-rollover-color{
   color:#fff;
   -webkit-transition: color 0.3s ease-in-out;
   transition: color 0.3s ease-in-out; 
 }
</style>

Is it possible to change some values on the fly (using jquery/javascript) so that browser takes change immediately?

Like change:

.icon-rollover-color

to

color:#333;

Answer 1

Yes, you can change inline CSS using the jquery .css() function. See this Fiddle.

$('p').css('color','#00FF00');

If you are dynamically adding elements then I would suggest you write this as a function that is called whenever a new element is added, probably using an event listener, that you can pass your updated style values to as parameters. Something like:

updateDOMStyle('<style>','<value>');

Answer 2

in jquery

<script>

  $('.icon-rollover-color').css({
    'color': '#333'
  });

</script>

in javascript

<script type="text/javascript">
document.getElementByClassName(".icon-rollover-color").style.color="#333"
</script>