点击颜色切换背景颜色和点击图片切换背景图片

点击颜色切换背景颜色和点击图片切换背景图片

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：vis JavaScript

作者:彭嘉豪

撰写时间：2021：5：17

 

点击颜色切换背景颜色

在style里设置颜色的值之后用jq获取

 

 

 

Jq代码

 

Ready页面加载事件，获取所有button按钮，绑定点击事件。

定义一个color。getComputedStyle 获取属性值。

这样可以获取到我们所点击的按钮对应的颜色。

最后获取到body设置背景颜色为我们获取到的颜色属性。

 

 

 

=======================================================================================

同上，我们可以用getComputedStyle 获取到图片属性，实现切换背景图片。

 

 

 

设置div用来设置图片。

 

给每个div设置背景图片。

 

jq部分

Ready页面加载，获取到所有的图片div，绑定click点击事件。

 

定义url也是使用getComputedStyle 方法，获取到图片url属性。

获取到body设置背景图片为我们获取到的url属性。