Javascript / jQuery change inline style values -

i have inline css in 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 possible change values on fly (using jquery/javascript) browser takes change immediately?

like change:

.icon-rollover-color

to

color:#333;

yes, can change inline css using jquery .css() function. see this fiddle.

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

if dynamically adding elements suggest write function called whenever new element added, using event listener, can pass updated style values parameters. like:

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