当前位置：文江博客话题详情

JavaScript Resize window-resize

窗口调整大小脚本有意想不到的副作用

发布于 2024-11-29 12:19:38 字数 3408 浏览 5 评论 0 原文

我编写了一个简短的 JavaScript，用于在将元素添加到页面时调整弹出窗口的大小。由于某种原因，每次添加新元素时，窗口的宽度都会减少 4 个像素，尽管它应该保持不变，因为添加的元素的宽度始终相同。

知道是什么原因造成的吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
        function resizeWin(){
            var winHeight=document.getElementById('bodyArea').offsetHeight;
            var winWidth=document.getElementById('bodyArea').offsetWidth;
            alert(winWidth);
            window.resizeTo(winWidth+20,winHeight+80);
        }

    </script>
</head>
<body onLoad="javascript:resizeWin()"> 
<div id="bodyArea" style="overflow: hidden;"> 
    <form id="courseDetails" action="/CourseRegistration/Courses" method="POST" width: 300px">
        <table>
                //blah blah, constant size
        </table>

        <input type="button" value="Add Session" onclick="addRow('addCourse');resizeWin();" />
        <input type="button" value="RemoveSession" onclick="deleteRow('addCourse');resizeWin();" />

        <table id="addCourse" border="1">
            <tr>
                <td><input type="checkbox" name="chk"/></td>
                <td>
                    <select name="day">
                        <option value="1">Sunday</option>
                        <option value="2">Monday</option>
                        <option value="3">Tuesday</option>
                        <option value="4">Wednesday</option>
                        <option value="5">Thursday</option>
                        <option value="6">Friday</option>
                        <option value="7">Saturday</option>
                    </select>
                </td>
                <td>
                    <select name="start">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                       <option value="5">5</option>
                <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </td>
                <td>
                    <select name="duration">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </td>
        </tr>
    </table>
    <input type="submit" value="Submit" name="addCourse" />
    </form>
    </div>
</body>
</html>

原文

I wrote a short javascript to resize a popup window when an element is added to the page.
For some reason each time a new element is added the width of the window decreases by 4 pixels, even though it should stay the same because the width of added elements is always the same.

Any idea what could be causing this ?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
        function resizeWin(){
            var winHeight=document.getElementById('bodyArea').offsetHeight;
            var winWidth=document.getElementById('bodyArea').offsetWidth;
            alert(winWidth);
            window.resizeTo(winWidth+20,winHeight+80);
        }

    </script>
</head>
<body onLoad="javascript:resizeWin()"> 
<div id="bodyArea" style="overflow: hidden;"> 
    <form id="courseDetails" action="/CourseRegistration/Courses" method="POST" width: 300px">
        <table>
                //blah blah, constant size
        </table>

        <input type="button" value="Add Session" onclick="addRow('addCourse');resizeWin();" />
        <input type="button" value="RemoveSession" onclick="deleteRow('addCourse');resizeWin();" />

        <table id="addCourse" border="1">
            <tr>
                <td><input type="checkbox" name="chk"/></td>
                <td>
                    <select name="day">
                        <option value="1">Sunday</option>
                        <option value="2">Monday</option>
                        <option value="3">Tuesday</option>
                        <option value="4">Wednesday</option>
                        <option value="5">Thursday</option>
                        <option value="6">Friday</option>
                        <option value="7">Saturday</option>
                    </select>
                </td>
                <td>
                    <select name="start">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                       <option value="5">5</option>
                <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </td>
                <td>
                    <select name="duration">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </td>
        </tr>
    </table>
    <input type="submit" value="Submit" name="addCourse" />
    </form>
    </div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红衣飘飘貌似仙 2024-12-06 12:19:38

在

您缺少宽度的开头=；尝试 width="300px" 也许这会产生一些错误。

回复收藏 0 原文

计㈡愣 2024-12-06 12:19:38

尝试这样做以确保 body 适合窗口：

BODY{
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}

Try this to ensure that body fit window:

BODY{
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}

回复收藏 0 原文

~没有更多了~

关于作者

蓝色星空

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

窗口调整大小脚本有意想不到的副作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

窗口调整大小脚本有意想不到的副作用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

饮湿

明月

02

hs1283

风向决定发型

落花浅忆

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。