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

<script>

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

</script>

在javascript

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

Answer 2

你，确实可以！

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

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

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

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

Answer 3

您可以使用简单的方法 jquery。

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

Answer 4

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

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

如果您要动态添加元素，那么我建议您将其编写为函数，每当添加新元素时调用该函数，可能使用事件侦听器，您可以将更新后的样式值作为参数传递给它。类似于：

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

Javascript / jQuery 更改内联样式值

Javascript / jQuery change inline style values

javascript

css

jquery

styles