Javascript来否决特别声明的CSS样式

javascript to overrule specifically declared css style

本文关键字：声明 CSS 样式 Javascript      更新时间：2023-09-26

通过数据库处理，我最终得到了包含有颜色的"span "的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';
}

但是，这不起作用，因为span's显然覆盖了

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

尝试以下操作:

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

虽然，我建议您为突出显示的span提供一个类名，并根据该类而不是标记名进行选择

一般来说，要改变span的颜色可以使用

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

我假设，你想针对span而不是整个div那么，把id放在span上，像这样

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

现在把它包装在一个函数中，你在提供的代码中正确地编写了它，但是如果你想在某些时候调用它，你通常需要使用事件处理程序来调用该函数。

这是当鼠标移到span上时调用该函数的jsfiddle。

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

您指向的是div，而不是span，因此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()
相关文章：