通过js函数实现点击按钮更换背景

 时间:2024-10-14 02:41:24

1、我们先来看一下页面,这个页面非常简单,只有两个按钮;而往页面中加按钮可以用 button 这个标签 ,也可以用 input 标签;小编用的 是 input;

通过js函数实现点击按钮更换背景

2、然后看一下我们的按钮的功能,其实就是 用鼠标点击 ‘单击获取橙色背景’按钮,然后页面就会变成 橙色的背景;另一个按钮点击也是同样的效果,只是颜色不同而已;

通过js函数实现点击按钮更换背景

3、如下图这个是 这个页面的代码,有些基础的话应该可以看出来 两个 input 标签,和下面的 script 番舸榆毛标签 存放js脚本;关键是我们将 onclick 事件直接放到了 input标签中了; script 标签中 定义了一个关于背景的函数;

通过js函数实现点击按钮更换背景

4、这个 input 标签中的 onclick 事件和 script 中的函数是相辅相成的,如果关闭 scrpit 标签中的 js 脚本 ,那么按钮是无法生效的;

通过js函数实现点击按钮更换背景

5、如图 重新开启 js 脚本,那么 input 里面的 onclick 事件,也就是是 onclick=‘changeColor(‘泠贾高框orange’)’ 才可触发并成功执行(差不多是,js关闭,事件是在,但是这个事件要做什么却不知道,‘bgColor’是参数)

通过js函数实现点击按钮更换背景
  • INDESIGN交互式文档文字动效制作方法
  • 轻松学会AI画板的移动
  • 宝塔面板设置方法
  • 如何在ppt中制作蜂窝状图表
  • 【AI技巧】用AI绘制地点示意图
  • 热门搜索
    红心向党手抄报 小学生手抄报制作大全 感谢老师的手抄报 六一儿童节手抄报图片 小学数学手抄报内容 国家公祭日手抄报 手抄报花边素材 感恩手抄报内容大全 中秋节手抄报内容资料 劳动节手抄报图片