论坛 › 马黑黑教程专版 › JS：改变当前页面背景色

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

JS：改变当前页面背景色

<style>
#clBox { margin: 20px auto; padding: 16px 10px 6px 10px; width: fit-content; height: fit-content; border-radius: 10px; box-shadow: 3px 6px 20px #000; }
.cCode { padding: 10px; background: #eee; }
.txtRed { color: red; }
.txtBlue { color: blue; }
.txtGreen { color: green; }
.txtMagenta { color: magenta; }
</style>

<div id="clBox" title="操作台">
        <output id="bodyMsg"></output>
        <p>
                <button id="btnChgBg" value="#ccc">改变页面背景颜色</button>
                <button id="btnRecoverBg" value="color">恢复页面背景颜色</button>
        </p>
</div>

<p>改变页面背景色要从页面的 body 标签入手。body是一个大元素，页面的所有内容都以它为舞台并在其上尽情展现自我。那么，既然body是一个元素，JS就可以找到它，就和找到一个 div 一样简单：</p>
<pre class="cCode">let <span class="txtBlue">_body</span> = <span class="txtRed">document</span>.<span class="txtBlue">querySelector</span>(<span class="txtMagenta">'body'</span>);<br><span class="txtGreen">/* console.log(_body); */</span></pre>
<p><span class="txtBlue">_body</span> 是我们命名的变量，用以代表页面的 body 标签，也就是body元素。接着，我们从 <span class="txtRed">document</span> 对象即文档对象通过 <span class="txtBlue">querySelector</span> 方法查询名为 <span class="txtMagenta">'body'</span> 的选择器（也就是标签名为 body 的元素），并将获得的值交给我们定义的变量 <span class="txtBlue">_body</span>。为了验证是否真的找到，可以使用 console.log(_body); 指令在控制台查看效果。需要注意的是，querySelector 方法获得的标签（元素）是同名标签（元素）中的第一个。</p>
<p>找到了操作对象，下一步就是操作它。我们的任务是改变当前页面的背景色，这需要用到元素的 <span class="txtRed">style</span> 属性，该属性的 <span class="txtRed">background-color</span> 属性就是背景颜色，JS写作 <span class="txtBlue">元素</span>.<span class="txtRed">style</span>.<span class="txtRed">backgroundColor</span> ：</p>
<pre class="cCode"><span class="txtBlue">_body</span>.<span class="txtRed">style</span>.<span class="txtRed">backgroundColor</span> = <span class="txtMagenta">'#ccc'</span>;</pre>
<p>就酱简单！</p>
<p>当然，上方的控制台不仅可以设置当前页面的背景色，还能恢复初始背景色，如此可以确保我们的实验是无害的。这需要在改变背景色之前，先获得当前页面的背景色并保存下来，然后交由恢复按钮去操作。获得某一个元素的指定属性值，我们需要用到JS的一个 API ：window.getComputedStyle()，这将会拿到元素的CSS属性的对象集合，再通过 getPropertyValue() 取其 background-color 属性值即可。详情请查看稍后公布的操作台源码。</p>

<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>

马黑黑 发表于 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>

起个网名好难 发表于 2024-1-8 12:19

对学习研究js有意义，但对做帖子就是意义不大了，因为帖子都是包裹在其它的容器 tag 里的，帖子背景一般不会有影响。

樵歌 发表于 2024-1-8 12:38

吃瓜的来围观，看哪个乖徒儿先出效果图{:4_189:}

马黑黑 发表于 2024-1-8 13:28

起个网名好难 发表于 2024-1-8 12:19
对学习研究js有意义，但对做帖子就是意义不大了，因为帖子都是包裹在其它的容器 tag 里的，帖子背景一般不 ...

这是拿到元素、操作元素的范例，不一定是要做帖子。况且，做交互性的帖子，是需要有这个能力的

马黑黑 发表于 2024-1-8 13:28

樵歌 发表于 2024-1-8 12:38
吃瓜的来围观，看哪个乖徒儿先出效果图

{:4_190:}

侃大山 发表于 2024-1-8 14:13

点过，真的变了{:4_204:}

起个网名好难 发表于 2024-1-8 17:51

马黑黑 发表于 2024-1-8 13:28
这是拿到元素、操作元素的范例，不一定是要做帖子。况且，做交互性的帖子，是需要有这个能力的

是的，如果是做个项目要统一页面风格，在style节里设置一些body就好。

马黑黑 发表于 2024-1-8 17:55

起个网名好难 发表于 2024-1-8 17:51
是的，如果是做个项目要统一页面风格，在style节里设置一些body就好。

这里只是呈现以下操作DOM的方法

马黑黑 发表于 2024-1-8 17:56

侃大山 发表于 2024-1-8 14:13
点过，真的变了

{:4_181:}

起个网名好难 发表于 2024-1-8 17:57

马黑黑 发表于 2024-1-8 17:55
这里只是呈现以下操作DOM的方法

相对来说body太大了，以div为例就蛮好的如#papa{:5_106:}

马黑黑 发表于 2024-1-8 18:04

起个网名好难 发表于 2024-1-8 17:57
相对来说body太大了，以div为例就蛮好的如#papa

从大的开始下手

红影 发表于 2024-1-8 19:31

这个body元素太厉害了，操作它就能操作整个页面啊{:4_204:}

樵歌 发表于 2024-1-8 19:41

马黑黑 发表于 2024-1-8 13:28


看到变色了{:4_174:}

马黑黑 发表于 2024-1-8 19:55

樵歌 发表于 2024-1-8 19:41
看到变色了

{:4_190:}

马黑黑 发表于 2024-1-8 19:56

红影 发表于 2024-1-8 19:31
这个body元素太厉害了，操作它就能操作整个页面啊

从结构看，body是页面众元素之父，一切都在它那里安排落脚点

千羽 发表于 2024-1-8 20:18

俺飘过{:6_239:}

马黑黑 发表于 2024-1-8 20:40

千羽 发表于 2024-1-8 20:18
俺飘过

喝水{:4_190:}

红影 发表于 2024-1-8 21:45

马黑黑 发表于 2024-1-8 19:56
从结构看，body是页面众元素之父，一切都在它那里安排落脚点

元素之父发令，其他的小字辈都必须遵守{:4_173:}

马黑黑 发表于 2024-1-8 23:21

红影 发表于 2024-1-8 21:45
元素之父发令，其他的小字辈都必须遵守

它只是提供一个场景

查看完整版本: JS：改变当前页面背景色