Javascript/jQuery 更改内联样式值

Question

我的页面中有一个内联 CSS:

<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>

是否可以动态更改某些值(使用 jquery/javascript)以便浏览器立即进行更改？

点赞:

.icon-rollover-color

到

color:#333;

Answer 1

是的，您可以使用 jquery .css() 函数更改内联 CSS。参见 this Fiddle .

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

如果您要动态添加元素，那么我建议您将此写成一个函数，每当添加一个新元素时都会调用该函数，可能使用事件监听器，您可以将更新后的样式值作为参数传递给该函数。像这样的东西:

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