版本一(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%
height:100%
}
HTML部分
<button id="redBth">红色</button>
JS部分
var redBth=document.getElementByld(“reBth”)
redBtn.onclick = funcion(){
document.body.style.background = "red"}
注释内容
- var redBtn 声明是一个变量 ,相当于给按钮起个名字存起来
- 当我们点击这个按钮的时候 才会执行function中的代码