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中

<script>

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

</script>

在javascript中

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

Answer 2

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

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

Answer 3

是的，您可以使用jquery .css（）函数更改内联CSS。请参阅this Fiddle。

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

如果你是动态添加元素，那么我建议你把它写成一个函数，每当添加一个新元素时调用它，可能使用一个事件监听器，你可以将更新的样式值作为参数传递。类似的东西：

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

Answer 4

你，确实这是可能的！

只需通过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>');

Javascript / jQuery更改内联样式值

4 个答案: