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

自

颜色：#333;

Answer 1

是的，您可以使用 jquery .css（） 函数更改内联 CSS。看到这个小提琴。

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

如果您正在动态添加元素，那么我建议您将其编写为一个函数，每当添加新元素时都会调用该函数，可能使用事件侦听器，您可以将更新的样式值作为参数传递给该函数。像这样：

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

Answer 2

in jquery

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

在JavaScript中

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

Answer 3

你可以通过使用简单的jquery来做到这一点。

$('.icon-rollover-color').css('color','red')

Answer 4

你，这确实是可能的！

只需通过 Javascript 或 jQuery 在页面底部添加以下 style -tag。

<style type="text/css">
.icon-rollover-color {
    color:#333!important;
}
</style>

您可以在使用 append -命令关闭 body -tag 之前将此类代码添加到底部：

$(body).append('<style type="text/css">.icon-rollover-color {color:#333!important;}</style>');