JavaScript之DOM实践

前言

    HTMLDOMJavaScript有能力对HTML作出反应,有时候,我们需要一些网页效果,为了更好地适应用户的效果,比如,我们平时接触,点击某个按钮,按下去的瞬间会变色,再比如,有时候鼠标经过的时候会显示下面的页面,离开时显示的页面消失,这些都可以通过JavaScript实现。

内容

点击按钮效果

运行效果

 

Demo

 

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
}

function mUp(obj)
{
obj.style.backgroundColor="green";
}
</script>
</body>
</html>

鼠标事件控制显示页面

运行效果


Demo

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver()" onmouseout="mOut()" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<br>
<br>
<div id="demo" onload="my()" style="background-color:red;120px;height:10px;padding:40px;"><strong>欢迎光临</strong></div>
<script>
function mOut()
{
document.getElementById('demo').style.visibility='hidden'
}

function mOver()
{
document.getElementById('demo').style.visibility='visible'
}
</script>
</body>
</html></span>


原文地址:https://www.cnblogs.com/zhoulitong/p/6412383.html