Javascript 在js中检查主体背景是否有效，或者是否有更好的方法来执行相同的操作？

bg（）

是一个单击即可触发的函数。这里是

bg（）

：

函数bg（）{
log（document.querySelector（'body'）.style.background）；
if（document.querySelector（'body'）.style.background==“#3e4756”）{
document.querySelector（'body'）.style.background=“#ffffff”；
}
if（document.querySelector（'body'）.style.background==“#ffffff”）{
document.querySelector（'body'）.style.background=“#0000ff”；
}
if（document.querySelector（'body'）.style.background==“#0000ff”）{
document.querySelector（'body'）.style.background=“#3e4756”；
}
}

.style.background

将返回空字符串，除非在HTML中内联设置了背景样式（在元素的

style

属性中）

getComputedStyle（）

通常是读取CSS值的更好方法——但请注意，您要查找的是

backgroundColor

，而不是

background

（包括backgroundImage、backgroundRepeat等）；而且浏览器在表示颜色方面并不一定一致：

让body=document.getElementsByTagName（'body'）[0]；
让bgColor=window.getComputedStyle（theBody.backgroundColor）；
console.log（bgColor）
body{background color:#FFC}
.style.background
将返回空字符串，除非在HTML中内联设置了背景样式（在元素的
style
属性内）

getComputedStyle（）
通常是读取CSS值的更好方法——但请注意，您要查找的是
backgroundColor
，而不是
background
（包括backgroundImage、backgroundRepeat等）；而且浏览器在表示颜色方面并不一定一致：


让body=document.getElementsByTagName（'body'）[0]；
让bgColor=window.getComputedStyle（theBody.backgroundColor）；
console.log（bgColor）
body{background color:#FFC}
getComputedStyle
如果可以通过css样式或元素标记上的style属性设置背景，则这一点非常重要。但是，如果您不关心CSS中的背景是什么，而只想通过style属性（如您编写的代码）控制背景，则可以使用
getComputedStyle
函数忽略。此外，当您通过
style
属性设置背景时，它将覆盖CSS设置的任何背景值

下面是一个循环使用背景色的工作示例。我使用了一个全局变量
bgColors
作为背景色，并使用了一个起始索引
bgIndex
。每次单击按钮，都会调用
toggleBg（）
函数。第一次调用时，
主体
背景更新为
bgColors[0]
处的值，即
#0000ff

下一行，
bginder
将被更新。它检查值是否大于数组长度，如果大于，则将
bginder
设置为
0
，如果不是，则将其递增
1

因此，下次调用函数时，
bginder
是
1
，因此背景设置为
bgColors[1]
，即
#3e4756


const bgColors=[“#0000ff”、“#3e4756”、“#ffffff”]
设bgIndex=0；
函数toggleBg（）{
const body=document.querySelector（“body”）；
body.style.background=bgColors[bgIndex]；
bgIndex=bgIndex>=bgColors.length-1？0:bgIndex+1；
}
document.querySelector（“更改背景”）.addEventListener（“单击”，切换背景）
如果可以通过css样式或元素标记上的样式属性设置背景，则切换背景非常重要。但是，如果您不关心CSS中的背景是什么，而只想通过style属性（如您编写的代码）控制背景，则可以使用
getComputedStyle
函数忽略。此外，当您通过
style
属性设置背景时，它将覆盖CSS设置的任何背景值

下面是一个循环使用背景色的工作示例。我使用了一个全局变量
bgColors
作为背景色，并使用了一个起始索引
bgIndex
。每次单击按钮，都会调用
toggleBg（）
函数。第一次调用时，
主体
背景更新为
bgColors[0]
处的值，即
#0000ff

下一行，
bginder
将被更新。它检查值是否大于数组长度，如果大于，则将
bginder
设置为
0
，如果不是，则将其递增
1

因此，下次调用函数时，
bginder
是
1
，因此背景设置为
bgColors[1]
，即
#3e4756


const bgColors=[“#0000ff”、“#3e4756”、“#ffffff”]
设bgIndex=0；
函数toggleBg（）{
const body=document.querySelector（“body”）；
body.style.background=bgColors[bgIndex]；
bgIndex=bgIndex>=bgColors.length-1？0:bgIndex+1；
}
document.querySelector（“更改背景”）.addEventListener（“单击”，切换背景）
切换背景
建议不要使用内联样式，而是使用类

这里有一个很酷的解决方案

当它成功地用新类替换旧类时，它返回true，当我们知道它已交换时，我们只需返回/退出函数

堆栈片段


document.addEventListener（'click'，bg）；
函数bg（）{
var the_body=document.querySelector（'body'）；
如果（主体类列表替换（“第一”、“第二”）返回；
如果（主体类别L