JS：改变当前页面背景色

马黑黑 · 发表于 2024-1-8 10:51

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

改变页面背景色要从页面的 body 标签入手。body是一个大元素，页面的所有内容都以它为舞台并在其上尽情展现自我。那么，既然body是一个元素，JS就可以找到它，就和找到一个 div 一样简单：

let _body = document.querySelector('body');
/* console.log(_body); */

_body 是我们命名的变量，用以代表页面的 body 标签，也就是body元素。接着，我们从 document 对象即文档对象通过 querySelector 方法查询名为 'body' 的选择器（也就是标签名为 body 的元素），并将获得的值交给我们定义的变量 _body。为了验证是否真的找到，可以使用 console.log(_body); 指令在控制台查看效果。需要注意的是，querySelector 方法获得的标签（元素）是同名标签（元素）中的第一个。

找到了操作对象，下一步就是操作它。我们的任务是改变当前页面的背景色，这需要用到元素的 style 属性，该属性的 background-color 属性就是背景颜色，JS写作元素.style.backgroundColor ：

_body.style.backgroundColor = '#ccc';

就酱简单！

当然，上方的控制台不仅可以设置当前页面的背景色，还能恢复初始背景色，如此可以确保我们的实验是无害的。这需要在改变背景色之前，先获得当前页面的背景色并保存下来，然后交由恢复按钮去操作。获得某一个元素的指定属性值，我们需要用到JS的一个 API ：window.getComputedStyle()，这将会拿到元素的CSS属性的对象集合，再通过 getPropertyValue() 取其 background-color 属性值即可。详情请查看稍后公布的操作台源码。

马黑黑 · 发表于 2024-1-8 10:52

本帖最后由马黑黑于 2024-1-8 10:54 编辑

一楼操作台代码：

<style>
#clBox { margin: auto; padding: 16px 10px 6px 10px; width: fit-content; height: fit-content; border-radius: 10px; box-shadow: 3px 6px 20px #000; }
</style>
<div id="clBox" title="操作台">
<output id="bodyMsg"></output>
<p>
<button id="btnChgBg" value="#ccc">改变页面背景颜色</button>
<button id="btnRecoverBg" value="color">恢复页面背景颜色</button>
</p>
</div>
<script>
let _body = document.querySelector('body');
let _bgColor = window.getComputedStyle(_body,null).getPropertyValue('background-color');
bodyMsg.textContent = '当前页面背景色: ' + _bgColor;
btnChgBg.onclick = () => _body.style.backgroundColor = btnChgBg.value;
btnRecoverBg.onclick = () => _body.style.backgroundColor = _bgColor;
</script>