我有以下 javascript 函数,可以简单地更改网页的背景主题:
<script type="text/javascript">
var i=1;
function colorTheme(){
if(i%2==0){
document.body.style.backgroundColor="white";
}
else{
document.body.style.backgroundColor="#313030";
document.body.style.color= white;
}
i++;
}
</script>
<br>
<button onclick="colorTheme()">Click me</button>
当我将页面的背景主题更改为黑色时,我想反转文本颜色,以便整个页面仍然可读。我在网上看到 document.body.style.color="whatever color you want"
应该可以改变整个网页的文本颜色,但由于某种原因,这不起作用。这行代码没有将我整个网页的文本颜色更改为白色是否有原因?
最佳答案
您需要引用颜色字符串,即 white
document.body.style.color= 'white'; //Quotes around the color
此外,它在您为 div
指定颜色的情况下不起作用。或 p
由于特殊性和覆盖继承的元素 color
Demo 2 (这里的 p
不会使用白色,因为 red
是使用 CSS 为 p
元素设置的,所以不会继承 body
元素的颜色)
最好交换样式表而不是分配 color
至 body
如果color
,标签将不起作用也适用于其他元素。
正如您所说,您不确定样式表的交换意味着什么,因此您需要分配,比如 id
到 <link>
标记为..
HTML
<link id="swapper" rel="stylesheet" type="text/css" href="default.css" />
现在创建一个交换器函数,例如..
JavaScript
function swapper(select_sheet){
document.getElementById('swapper').setAttribute('href', select_sheet);
}
现在调用 onClick 函数来交换样式表...
HTML
<button onClick="swapper('default.css')">Default</button>
<button onClick="swapper('stylesheet2.css')">Stylesheet 2</button>
关于javascript函数反转文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22447111/