DOM实现网页一键换肤

在个性化页面制作里经常会用到一键换肤功能,其中包括更换背景、文字颜色、按键背景色等等一套样式。这个功能可以用DOM完成。

1、思路

设计四个按键,分别对应四套样式,点击样式即可改变背景。

代码思路是,html写四个按钮分别对应四个JavaScript函数,CSS写四个样式分别对应四个id,JavaScript部分的功能是改变标签的id使其对应CSS中的样式即可。

DOM实现网页一键换肤_第1张图片

2、HTML部分

html代码部分只需要写出四个对应名称的


3、CSS部分

写全四种样式的可能性,分别以不同的id选择器选中。

4、JavaScript部分

四个按钮的四个函数功能分别是修改body标签的id。

需要注意的是即便标签只有一个,也要在变量前加上[0]表示第一个选中的,否则无法成功设定id。



5、效果图:

DOM实现网页一键换肤_第2张图片


DOM实现网页一键换肤_第3张图片


DOM实现网页一键换肤_第4张图片


DOM实现网页一键换肤_第5张图片

你可能感兴趣的:(JavaScript)