Question

我有一个使用jQuery隐藏/显示面板的应用程序。这是一个aspx版本，它显示了原理：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#ClickMe').click(function () {
            $('#Panel').toggle();
            $('#Width').text($(window).width());
        });
        $('#Width').text($(window).width());
    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <fieldset id="FS1">
        <legend id="ClickMe">Click Me</legend>
        <div id="Panel" style="display:;width:auto">
            <label for="A">A</label>
            <input id="A" name="A" type="text" value="" />
        </div>
    </fieldset>
    <span id="Width">0</span>
</asp:Content>

这可以按预期工作。 $（window）.width（）总是返回相同的值。

在应用程序中，最初返回的值或隐藏“Panel”的值是正确的，但是当它可见时，返回的值减少了17个像素。

什么会影响jQuery返回的值？

Answer 1

正如已经指出的那样，它可能是一个滚动条，它正在发挥作用。要计算没有滚动条的宽度，您必须在执行计算时强制主体隐藏它们。像这样：

//hide the scrollbars
$('body').css({overflow: 'hidden'});
//get the window width here
var windowWidth = $(window).width();
//and now we put the scrollbars back
$('body').css({overflow: 'auto'});

什么可能影响$（window）.width（）返回的值？

1 个答案: