点击按钮控制网页背景更换——js事例

 时间:2026-04-23 17:31:14

1、架构:

div 中包含着一个 ul,ul中有两个 li;

(这里的 li 用作后面按钮的作用)

点击按钮控制网页背景更换——js事例

点击按钮控制网页背景更换——js事例

2、之后给 div设置一下高度和背景色(这样可以便于区分,由于我们设定的是一个长条栏所以就不设定宽度了)

点击按钮控制网页背景更换——js事例

点击按钮控制网页背景更换——js事例

3、然后控制 ul 下的 li 属性;

li 的高宽,外边距;设置为悬浮(这样 li 就可以在同一行);

分别为两个 li 设背景色紫色和粉红色(对应了下面背景图颜色);

点击按钮控制网页背景更换——js事例

点击按钮控制网页背景更换——js事例

4、然后先设定整个背景的背景图,我们首先设定粉红色的背景图(这是默认的背景图)

点击按钮控制网页背景更换——js事例

点击按钮控制网页背景更换——js事例

5、关键就是 script 标签中的  js  代码;

先获取 两个 li,并定义为变量,oL1,oL2;

然后写入事件( onclick 事件)

点击 oL1 时背景变为 紫色背景图;

点击 oL2 时背景变为 粉色背景图;

点击按钮控制网页背景更换——js事例

  • 手工折纸——旺旺
  • 如何锻炼自己的爆发力
  • 打开word的几种方式
  • 职场当中销售人员技巧之制造问题
  • 百度文库怎么查询登录记录
  • 热门搜索
    教师节手抄报内容文字 心理健康手抄报资料 诚信手抄报内容 儒家文化手抄报 关于卫生的手抄报 说普通话写规范字手抄报内容 红心向党手抄报 六一儿童节手抄报诗 走进名著手抄报 关于艾滋病的手抄报