Javascript / jQuery 更改内联样式值答案

【问题标题】：Javascript / jQuery change inline style valuesJavascript / jQuery 更改内联样式值
【发布时间】：2016-11-19 04:44:18
【问题描述】：

我的页面中有一个内联 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;

【问题讨论】：

搜索document.stylesheets。有很多用它做不同事情的例子。
那不是内联 CSS .. 那是内部 CSS，你可以用 Jquery 设置的内联样式覆盖它，比如 $('.icon-rollover-color').css('color','red')

标签： javascript jquery css styles

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

在 jquery 中

<script>

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

</script>

在 JavaScript 中

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

【讨论】：

这只影响页面上当前的元素。如果您动态添加新元素或更改类，它们将使用 CSS 中的样式。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你，这确实是可能的！

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

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

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

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

【讨论】：