小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如何实现点击按钮改变字体颜色并且循环？
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你这是第一单元实验课作业？按理说应该自己各种尝试啊。
讲一下原理，按钮和文字元素a。
文字元素a是被操作对象，需要存储一个颜色索引，html元素可以使用dataset存储。
按钮是操作者，在html点击事件onclick中取出文字元素a的颜色索引，加1取余实现循环变换，然后设置文字元素a的颜色，保存颜色索引到文字元素a的dataset。
要点：1、了解DOM，知道通过style.color 取色和设置文字颜色，通过 dataset.camelCaseWord方式取值和设置值，2、颜色初始值为-1，保证点一下变成红色，3、使用parseInt转换颜色索引为数值，数值+1才能正确取余
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <button onclick="var i=parseInt(document.getElementById('a').dataset.colorId); i= (i+1)%4; document.getElementById('a').style.color=['red', 'green', 'blue', 'green'][i]; document.getElementById('a').dataset.colorId = i">hit me</button> <p id='a' data-color-id="-1">Hi friend, try edit me!</p> </body> </html>
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你这是第一单元实验课作业？按理说应该自己各种尝试啊。
讲一下原理，按钮和文字元素a。
文字元素a是被操作对象，需要存储一个颜色索引，html元素可以使用dataset存储。
按钮是操作者，在html点击事件onclick中取出文字元素a的颜色索引，加1取余实现循环变换，然后设置文字元素a的颜色，保存颜色索引到文字元素a的dataset。
要点：1、了解DOM，知道通过style.color 取色和设置文字颜色，通过 dataset.camelCaseWord方式取值和设置值，2、颜色初始值为-1，保证点一下变成红色，3、使用parseInt转换颜色索引为数值，数值+1才能正确取余
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <button onclick="var i=parseInt(document.getElementById('a').dataset.colorId); i= (i+1)%4; document.getElementById('a').style.color=['red', 'green', 'blue', 'green'][i]; document.getElementById('a').dataset.colorId = i">hit me</button> <p id='a' data-color-id="-1">Hi friend, try edit me!</p> </body> </html>