以下是一个示例代码,演示了按下按钮时如何更改按钮的颜色和文本:
在上面的代码中,我们首先定义了一个样式类 .btn
,它设置了按钮的初始背景色、内边距、边框和文本颜色。然后,我们使用 .btn:hover
和 .btn:active
来定义按钮在鼠标悬停和按下时的颜色变化。
在 JavaScript 部分,我们定义了一个 changeColorAndText
函数,它会在按钮被点击时触发。在函数内部,我们首先使用 document.getElementById
方法获取到按钮元素,然后通过修改按钮元素的 style.backgroundColor
来更改背景色,同时修改按钮元素的 innerHTML
来更改文本内容。
当按钮被点击时,背景色会变为红色,并且按钮上的文本会变为 "Button Clicked!"。
下一篇:按下时更改文本颜色”的