初识JavaScript01

最新推荐文章于 2024-11-12 11:19:19 发布

wcx909241523

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量152

点赞数

分类专栏： JAVAScript 文章标签： javascript 函数

本文链接：https://blog.csdn.net/wcx909241523/article/details/78177018

版权

JAVAScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个鼠标移入是红色鼠标移出变绿色的例子

<head>
<title>Title</title>
<style>
#div1{
      width: 200px;
      height: 200px;
      background: red;}
</style>
<script>
function toGreen(){
            document.getElementById('div1').style.width="300px";
            document.getElementById('div1').style.height="300px"；
            document.getElementById('div1').style.background="green";
        }
function toRed(){
            document.getElementById('div1').style.width="200px";
            document.getElementById('div1').style.height="200px";
            document.getElementById('div1').style.background="red";
        }

</script>
</head>

<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>

下面是改进：通过使用变量

<script>
        function toGreen(){
            var oDiv= document.getElementById('div1');
            oDiv .style.width="300px";
            oDiv.style.height="300px";
            oDiv.style.background="green";
        }
        function toRed(){
            var oDiv= document.getElementById('div1');
            oDiv.style.width="200px";
            oDiv.style.height="200px";
            oDiv.style.background="red";
        }
    </script>