js动态修改html、body的css属性

142 阅读 0 评论 94 点赞

我是靠谱客的博主爱笑篮球，这篇文章主要介绍js动态修改html、body的css属性，现在分享给大家，希望可以做个参考。

js获取html标签
document.documentElement
js获取body标签
document.body
以react为例，当页面属性（status）改变时，动态改变html和body的背景色，代码如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
useEffect(() => {
	switch (status) {
		case 'a':
			document.body.style.background = 'color1' // 修改body的背景色为color1
		    document.documentElement.style.background = 'color1' // 修改html的背景色为color1
		    break
		case 'b':
			document.body.style.background = 'color2'
		    document.documentElement.style.background = 'color2' 
		    break
		default:
			break
	}
}, [status])