javascript 否决特别声明的 css 样式答案

【问题标题】：javascript to overrule specifically declared css stylejavascript 否决特别声明的 css 样式
【发布时间】：2015-07-22 00:00:43
【问题描述】：

通过数据库进程，我最终得到了包含彩色“跨度”的 html。例如：

<div id="RelevantDiv">the industry's standard <span style="background-color: red">dummy text ever since the 1500s, when an unknown printer took a galley</span> of type and scrambled it to make a type specimen book. It has survived not only five.</div>

一般我想保留这种颜色。但是，我还想构建一个 javascript 函数来打开或关闭此背景颜色。我尝试了以下方法：

function HLtoggle()
{
var element = document.getElementById('RelevantDiv');
element.style.background = '#FFFFFF';
}

但是，这不起作用，因为跨度显然覆盖了

【问题讨论】：

你尝试过使用 !important 规则吗？ element.style.background = '#FFFFFF !important';你还在任何地方调用你的函数吗？
您的背景颜色在span 元素上，而在js 中，您将获得整个div。此外，您将background-color 属性与速记属性background 混合使用
使用jquery。这更容易。
尝试使用重要的名称并不能解决问题。
用提供的小提琴检查我的答案

标签： javascript html css

【解决方案1】：

您的 background-color 在 span 元素上，而在 js 中您的目标是父 div。

尝试以下方法：

var element = document.querySelectorAll('#RelevantDiv > span')[0];
element.style['background-color'] = '#FFFFFF';

不过，我建议您为突出显示的跨度指定一个类名，并按该类而不是标签名进行选择。

【讨论】：

【解决方案2】：

一般来说，您可以使用更改跨度的颜色

var element = document.getElementById('RelevantDiv');
element.style.background = '#FFFFFF';

我假设，你想定位跨度而不是整个 div，因此将 id 放在跨度上

<span id="RelevantDiv" style="background-color: red">

现在要将它包装在一个函数中，您在提供的代码中正确编写了它，但如果您想在特定时间调用它，通常需要使用事件处理程序来调用该函数。

这是一个 jsfiddle，用于在您将鼠标悬停在 span 上时调用该函数。

https://jsfiddle.net/oLfyx0h5/4/

【讨论】：

【解决方案3】：

您指向的是 div，而不是跨度，因此 css 不会被覆盖。试试这个：

<div id="RelevantDiv">the industry's standard <span id='span_id' style="background-color: red">...

然后改函数

 function HLtoggle()
{
    var element = document.getElementById('span_id');
    element.style.backgroundColor = '#FFFFFF';
}
HLtoggle()

【讨论】：

有没有办法只将样式应用于所有跨度？
var element = document.getElementsByTagName('span')[0];将为您找到找到的第一个跨度 - getElementsByTagName 返回一个集合。
如果你想得到所有的跨度，那么这样做： var element = document.getElementsByTagName('span'); for (var i = 0; i
非常感谢。那工作得很好。关于如何在设置为 FFFFFF 和返回其原始值之间切换的任何快速建议？