什麼可能影響由$（window）.width（）返回的值？

我有一個使用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返回的值？

來源

2013-05-03 StarNamer

垂直滾動條是否有所不同？ – j08691 2013-05-03 17:00:34

沒有滾動條可見。當最初顯示該頁面是正確的時，它只是在隱藏面板後才發現它是錯誤的。我需要嘗試整理一個顯示他存在問題的頁面（並且不需要幾十個支持文件）。當然，這樣做我可能會發現問題出在哪裏！ – StarNamer 2013-05-04 12:53:22

正如已經指出的那樣，它可能是一個滾動條，它會產生變化。要計算沒有滾動條的寬度，您必須在執行計算時強制身體隱藏它們。類似這樣的：

//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'});

來源

2013-05-03 17:09:44 tomca32

沒有滾動條可見，但我會在下週嘗試您的建議。 – StarNamer 2013-05-04 12:50:00

什麼可能影響由$（window）.width（）返回的值？

回答

相關問題