显示和隐藏,改变display属性
关键代码:
e.style.display = "block";
e.style.display = "none";
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示和隐藏</title>
<script type="text/javascript">
function showPicture(){
//普通方式获得控件实例
var e = document.getElementById("myimg");
e.style.display = "block";
}
function hidePicture(){
//querySelector是html5增加的
//id前面得写#,class前面得写
document.querySelector("#myimg").style.display = "none";
//标签直接写即可,获取到第一个img标签
//document.querySelector("img").style.display = "none";
}
</script>
</head>
<body>
<a href="javascript:void(0);"onclick="showPicture()">查看图片</a>
<a href="javascript:void(0);"onclick="hidePicture()">隐藏图片</a>
<br />
<img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;" >
</body>
</html>
鼠标滑动更改内容 onmouseover
关键:
onmouse事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function moveToBlue(){
var e = document.querySelector("#btn_blue");
var e2 = document.querySelector("#btn_green");
var div = document.querySelector("#content");
e.st