JavaScript实现背景变色

需求：页面显示4个颜色块儿，当鼠标进入某个颜色块儿时，页面背景色变成该颜色

<div class="color"><div id="box1" class="box" style=" background-color: pink;"></div><div id="box2" class="box" style=" background-color: skyblue;"></div><div id="box3" class="box" style=" background-color: lightgreen;"></div><div id="box4" class="box" style=" background-color: plum;"></div>
</div>

<script>// 定义数组存储4个颜色块let color_arr = document.getElementsByClassName('box');// 循环遍历4个颜色块添加鼠标事件for(let i of color_arr){// 添加鼠标移入事件i.addEventListener('mouseover',function(){// 获取body控件document.querySelector('body').style.backgroundColor = this.style.backgroundColor;})// 添加鼠标移出事件i.addEventListener('mouseout',function(){// 获取body控件document.querySelector('body').style.backgroundColor = '#fff'})}
</script>

JavaScript实现背景变色相关推荐

JavaScript背景变色小案列
一日不见,如隔三秋我还是你们熟悉的--爱笑的陈sir 时间给勤勉的人留下智慧的力量, 给懒惰的人留下空虚和悔恨. 勤学的人,总是感到时间过得太快:懒惰的人,却总是埋怨时间跑得太慢. 今天是六一儿童节 ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
比较高效的表格行背景变色及选定高亮JS
比较高效的表格行背景变色及选定高亮JS 下面这个例一摘录自: http://blog.breakn.net/article.asp?id=447 例一: //点击当前选中行的时候设置当前行的颜色,同时 ...
jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
C# ListView控件显示表格（自适应宽度），添加 Checkbox，删除选择项，选中颜色和鼠标滑过背景变色
本文转载自:http://www.liangshunet.com/ca/201309/586362553.htm 亮术网 2020-03-07 本网原创 DataGridView控件功能十分强大,显示 ...
html导航栏点击之后变色,鼠标滑过字体加粗、背景变色的CSS导航栏
背景变色导航栏 .wrap{width:210px;margin:20px 300px;} .wrap ul,#listA li{padding:0;margin:0;list-style:none; ...
Android自定义控件3：带边框点击背景变色的textview,原型是支付宝手机充值中话费充值按钮
一.原型:支付宝手机充值中话费充值按钮. 二.实现效果: 三.在res/drawable下面创建两个xml: custom_border_txt_bg.xml用户可点击时,点击切换背景 custom_ ...
在DW中实现鼠标移入字体背景变色
1.首先创建一个新的HTML,,再创建新的css,接着创建新的文件夹将它们分别放进不同的位置. 2.接着在head标签里面输入link点击Tab键再点击空格选择刚才css文件夹,然后body写下div ...

JavaScript实现背景变色

JavaScript实现背景变色相关推荐

最新文章

热门文章