JavaScript DOM 利用样式实现元素移动位置

最新推荐文章于 2024-04-18 13:21:59 发布

原创最新推荐文章于 2024-04-18 13:21:59 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript DOM 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用CSS样式和JavaScript实现元素颜色变化及位置移动的简单示例。通过鼠标悬停事件触发样式更改，并利用setTimeout函数实现定时位置变动。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo1{
	width:300px;
	height:200px;
	border:3px solid #F00;
	position:absolute;
	top:0;
	left:0;
}
</style>
<script>

function ceh1(element)
{
	element.style.color="#0f0";
	element.style.backgroundColor="#a4c639";
	movement=setTimeout("ceh3()",1000);
}
function ceh2(element)
{
	element.style.color="";
	element.style.backgroundColor="";
}
function ceh3()
{
	element=document.getElementById("demo1");
	element.style.position="absolute";
	element.style.top="300px";
	element.style.left="600px";
}
</script>
</head>

<body>
<div id="demo1" onMouseOver="ceh1(this)" onMouseOut="ceh2(this)">
</div>
</body>
</html>

注意函数有没有写错，否则得不到执行。