今天是第一天,我们先来了解一下JS事件。我们可以为HTML标签赋予一个事件,就是通过某个动作触发它让它做一些事情,下面的例子我们给input赋予了鼠标移入和移出的动作让div1显示和隐藏。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个js实例</title>
<style>
#div1 { border: 1px solid #ccc; background: #ff0; width: 200px; height: 50px; padding: 20px 10px; display: none; }
</style>
</head>
<body>
<pre>
div1.style.display='block' 在火狐浏览器下是不兼容的,老一点版本的火狐会报错的,现在最新的火狐已经没有问题了。
正确方法:doucment.getElementById('div1') 获取对象。
</pre>
<!--<input type="checkbox" onMouseOver="div1.style.display='block'" onMouseOut="div1.style.display='none'"/>
-->
<input type="checkbox" onMouseOver="document.getElementById('div1').style.display='block'" onMouseOut="document.getElementById('div1').style.display='none'"/>
<div id="div1"> 为了您的账号安全,请不要.... </div>
</body>
</html>
稍微复制一点
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 { width: 200px; height: 200px; background: #ccc; }
</style>
</head>
<!--鼠标移动上div1宽度变成300px 高度变成300px; 背景变成红色,鼠标离开变回来。 我们按第一个实例思路做-->
<body>
<div id="div1" onMouseMove="document.getElementById('div1').style.width='300px';document.getElementById('div1').style.height='300px';document.getElementById('div1').style.background='red'" onMouseOut="document.getElementById('div1').style.width='200px';document.getElementById('div1').style.height='200px';document.getElementById('div1').style.background='#ccc'"></div>
上面代码这么写太恶心了,我们一般不会把样式放在行间,一般我们放到一个函数里面。
</body>
</html>
我们把样式封装到函数里面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>把样式封装到函数里面</title>
<style>
#div1 { width: 200px; height: 200px; background: #ccc; }
</style>
<script>
function toRed(){
document.getElementById('div1').style.width='300px';
document.getElementById('div1').style.height='300px';
document.getElementById('div1').style.background='red'
}
function toGray(){
document.getElementById('div1').style.width='200px';
document.getElementById('div1').style.height='200px';
document.getElementById('div1').style.background='#ccc'
}
</script>
</head>
<!--鼠标移动上div1宽度变成300px 高度变成300px; 背景变成红色,鼠标离开变回来。 我们按第一个实例思路做-->
<body>
<div id="div1" onMouseMove="toRed()" onMouseOut="toGray()"></div>
</body>
</html>