javascript 是否可以使用 CSS 根据背景颜色更改文本颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8820200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to change text color based on background color using CSS?
提问by Anupam
Is it possible to change text color based on background color using CSS?
是否可以使用 CSS 根据背景颜色更改文本颜色？
Like in this image
就像这张图片
As the text crosses over from one div (white-space:nowrap), is it possible to change the text color using CSS, or if not CSS, then JavaScript/jQuery?
当文本从一个 div ( white-space:nowrap)交叉时，是否可以使用 CSS 更改文本颜色，或者如果不是 CSS，则使用 JavaScript/jQuery？
回答by Jakub
Here is my solution (thinking it through a different way):
这是我的解决方案（通过不同的方式思考）：
Use a DIV with overflow: hidden;for the navy 'bar' that shows the rating scale.
You then write out two sets of TEXT:
使用 DIVoverflow: hidden;来表示显示等级的海军“条”。然后你写出两组文本：
- Inside the DIV bar (overflow: hidden;), it would be white (on top)
- In the underlying DIV container, it would be black. (container)
- 在 DIV 栏内（溢出：隐藏；），它会是白色的（在顶部）
- 在底层 DIV 容器中，它将是黑色的。（容器）
The result would be an overlap of the two colored text divs:
结果将是两个彩色文本 div 的重叠：
________________________________
| 1 | 2 |
|_(dark blue w white)_|__________|
<div style="position: relative; width: 250px; background: white; border: 1px solid #000; color: #000;">
<div style="position: absolute; z-index: 10; overflow: hidden; width: 105px; background-color: navy; white-space:nowrap; color: #FFF;">
Between 4:00 and 6:00 blah blah
</div>
Between 4:00 and 6:00 blah blah
</div>
It works great because it will 'cut through' letters if the bar is at that width. Check it out, I think its what you are looking for.
它工作得很好，因为如果条处于那个宽度，它会“切穿”字母。检查一下，我认为它是您正在寻找的。
回答by Simone
No, you can't do it with just CSS. You need JavaScript for this.
不，你不能只用 CSS 来做到这一点。为此，您需要 JavaScript。
With jQuery/JavaScript you can check if an element has a CSS rule applied to it, and then do what you want, i.e.
使用 jQuery/JavaScript，你可以检查一个元素是否应用了 CSS 规则，然后做你想做的，即
if ( $('#element').css('white-space') == 'nowrap' ) {
// do something
} else {
// do something else
}
Also read here: Jquery: How to check if the element has certain css class/style
回答by bardiir
Yes that's possible.
是的，这是可能的。
You can tie a background and a foreground color together into a class and use that on your text. So you got for example one style class having black text white background and one having white text and black background. You can switch that class then and the text will change with the background color.
您可以将背景色和前景色绑定到一个类中，然后在您的文本中使用它。所以你得到了例如一个具有黑色文本白色背景的样式类和一个具有白色文本和黑色背景的样式类。然后您可以切换该类，文本将随着背景颜色而变化。
And you can use jQuery('body').css('color', '#fff')for example to change the color of the body text to white.
jQuery('body').css('color', '#fff')例如，您可以使用将正文文本的颜色更改为白色。
If you provide some sample code it would even be possible to create a more specific answer for your question.
如果您提供一些示例代码，甚至可以为您的问题创建更具体的答案。
回答by Miguel S.
Indeed, you need to use JavaScript. I would approach the problem by doing something like this:
确实，您需要使用 JavaScript。我会通过做这样的事情来解决这个问题：
Calculate the width of the overlap in pixels. ie
width = ${"#container"}.width() - ${"#progressbar"}.width();Calculate the amount of text you have to highlight, you can use follow this discussion. I would start with an empty string, check its width and if it's lower than the width calculated above add one character and repeat. Once it's higher choose that string
Insert the above string between spans, like this
${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText);Obviously highlitedText is a string containing the characters in 2. and restOfTheText is a string with the rest of the characters.
计算重叠的宽度（以像素为单位）。IE
width = ${"#container"}.width() - ${"#progressbar"}.width();计算您必须突出显示的文本数量，您可以按照此讨论使用。我会从一个空字符串开始，检查它的宽度，如果它小于上面计算的宽度，则添加一个字符并重复。一旦它更高，请选择该字符串
在spans之间插入上面的字符串，像这样
${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText);显然highlitedText是一个包含2中字符的字符串。而restOfTheText是一个包含其余字符的字符串。
Good thing of this method is that you can rerun it if you change the width of your progressbar div.
这种方法的好处是，如果您更改进度条 div 的宽度，则可以重新运行它。
