A.了解js
1 点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="demo"></div>
<script type="text/javascript">
// 获取元素通过ID的方式
var a = document.getElementById("demo")
// 绑定这个点击事件
// (绑定点击事件，然后执行)
a.onclick = function () {
// 执行的任务
a.style.width="200px";
a.style.height="200px";
a.style.background="yellow"
}
</script>
</body>
</html>
!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="int" value="我是文本框 来点我">
<input type="button" id="btn" value="点击弹出文本框内容">
<script type="text/javascript">
// 获取事件
var a = document.getElementById("int");
var b = document.getElementById("btn");
b.onclick=function(){
alert(a.value)
}
</script>
</body>
</html>
3 .onmouseover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
div{
width: 200px;
height: 100px;
background:red;
}
</style>
</head>
<body>
<input type="button" id="btn" value="碰我你就消失">
<div id="dd">
</div>
<script type="text/javascript">
var a= document.getElementById("dd");
var b= document.getElementById("btn");
var c="none"
d="block"
b.onmouseover=function(){
a.style.display= c;
var e=c;
c=d;
d= e
}
</script>
</body>
</html>
B.
C.
laoshizhenrangrenshiwang
网友评论