js变色小案例

css部分

html,body{
width:100%;
height:100%
}

html部分

<input type="button"value="点我变红“onclick=document.body.style.background='red'''>
<input type="button"value="点我变红“onclick=document.body.style.background='rgb（0，0，0）'''>
<input type="button"value="点我变白“onclick=document.body.style.background='#FFF'''>

注释内容

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

版本二（函数式写法）

css部分

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

html部分

<button id="redbtn">红色<[图片上传失败...(image-723709-1605488371359)]

tton>

js部分

document.getElementByld("redBtn");
redBtn.onclick=function(){
document.boty.style.background="red"
}

注释内容

• 我们把执行的代码放在function中存起来
• 当我们点击这个按钮的时候，才会执行function中的代码