javascript 动态改变层的大小-优快云博客

本文链接：https://blog.youkuaiyun.com/limlimlim/article/details/8441985

本文介绍如何在网页上动态调整元素的大小，并通过事件监听实现元素随鼠标移动而变化的功能，包括代码实现和实例解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <title>动态设置层的大小</title>
    <style type="text/css">
        .divMain
        {
            width:10px;
            height:100px;
            border-style:solid;
            border-width:1px;
            border-color:Green;
            display:none;
        }
    </style>
    <script type="text/javascript">
        var setIntervalID;
        function ZoomDiv() {
            var divMain = document.getElementById("divMain");
            divMain.style.width = "200px";
            divMain.style.height = "200px";
        }
        function ShowDiv() {
            setIntervalID = setInterval("inc()", 100);
        }
        function inc() {
            var divMain = document.getElementById("divMain2");
            //div不能设置class,否则使用divMain.style.width取到的值时空的
            //只能在元素里设置style="width:10px;height:100px"
            var oldWidth = divMain.style.width;
            var oldHeight = divMain.style.height;
            oldWidth = parseInt(oldWidth);
            oldHeight = parseInt(oldHeight);
            oldWidth += 1;
            oldHeight += 1;
            if (oldWidth >= 200) {
                //清除定时器
                clearInterval(setIntervalID);
                return;
            }
            divMain.style.width = oldWidth + "px";
            divMain.style.height = oldHeight + "px";
        }
    </script>
</head>
<body>
    <input type="button" value="放大层" onclick="ZoomDiv()" />
    <input type="button" value="动态放大层" onclick="ShowDiv()" />
    <div id="divMain" class="divMain">
    案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
    </div>
    
    <div id="divMain2" style="width:10px;height:100px;background-color:Red;">
    案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
    </div>
</body>
</html>