JS点击变色小案例

css部分

html，body{
width:100%
height:100%
}

html部分

<input type="button" value="点我变红"onclick="document.body.style.background=`red"`>

注释内容

• input是一个标签，type="button"指它是一个按钮，value是这个按钮的内容
• onclick是点击，点击后会执行后面的代码
• style是样式，background是背景

版本二（函数式写法）

css部分

html，body{
width：100%
heigth: 100%
}

HTML部分

<button id="redBtn">红色</button>

js部分

 var redBtn = document.getElementByld("redBtn")
redBtn.onclik=function(){
document.body.style.background ="red"}

注释内容

• car redbtn 是声明一个变量 ，相当于给按钮起个名字存起来
• 我们把要执行的代码放在function中存起来
• 当我们点击这个按钮的时候，才会执行function中的代码