跟我一起学JS第一天

最新推荐文章于 2024-07-12 21:59:10 发布

binghui1990

最新推荐文章于 2024-07-12 21:59:10 发布

阅读量664

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/binghui1990/article/details/42009105

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天是第一天，我们先来了解一下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>

binghui1990

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跟我一起学JS第一天

今天是第一天，我们先来了解一下JS事件。我们可以为HTML标签赋予一个事件，就是通过某个动作触发它让它做一些事情，下面的例子我们给input赋予了鼠标移入和移出的动作让div1显示和隐藏。第一个js实例#div1 { border: 1px solid #ccc; background: #ff0; width: 200px; height: 50px; padding: 20
复制链接

扫一扫

专栏目录