天天看點

jQ擷取浏覽器window的高寬

Window 對象

Window 對象表示浏覽器中打開的視窗。JavaScript 層級中的頂層對象,表示浏覽器視窗。

如果文檔包含架構(frame 或 iframe 标簽),浏覽器會為 HTML 文檔建立一個 window 對象,并為每個架構建立一個額外的 window 對象。

注釋:沒有應用于 window 對象的公開标準,不過所有浏覽器都支援該對象。

使用jQuery可以這樣擷取window的寬高:

寬度: $(window).width()

高度: $(window).height()

實際效果:

相同的螢幕不同的浏覽器,即使都最大化,寬度也可能不一樣,可以在IE,Chrome,火狐的浏覽器中打開本頁看看上面的數值。

完整代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>擷取浏覽器window高寬-柯樂義</title>

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

</head>

<body>

<div id="windowinfo_keleyi_com"></div>

<script type="text/javascript">

$("#windowinfo_ke" + "leyi_com").html("寬度: " + $(window).width() + ", 高度: " + $(window).height());

</script>

<div style="background-color:Red; width:100%;height:150px;">歡迎</div>

<div style="background-color:Yellow; width:100%;height:150px;">hi</div>

<div style="background-color:Silver; width:100%;height:150px;">柯樂義</div>

<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div>

<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>

<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>

<div style="background-color:Blue; width:100%;height:150px;">柯樂義</div>

<div style="background-color:Olive; width:100%;height:150px;">柯樂義 傳回頂部</div>

<div style="background-color:Green; width:100%;height:150px;">A</div>

<div style="background-color:Purple; width:100%;height:150px;">jquery</div>

<div style="background-color:Green; width:100%;height:150px;"><a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank" rel="external nofollow" target="_blank">原文</a></div>

<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div>

<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>

<div style="height:130px;"></div>

<div id="downmsg_emessage" style="DISPLAY: block">

<div id="downmsgBar">

<div id="donwmsg_head">柯樂義推薦内容</div><a class="close" href="javascript:closeDiv()" target="_blank" rel="external nofollow" ></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()" target="_blank" rel="external nofollow" >&nbsp;</a></div>

<div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">

<ul>

<li class="ll"><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" target="_blank" rel="external nofollow" >單行文字間歇向上滾動</a></li>

<li><a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" target="_blank" rel="external nofollow" >jQuery UI修飾title氣泡</a></li>

<li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm" target="_blank" rel="external nofollow" >jquery清空textarea等輸入框</a></li>

<li><a href="http://keleyi.com/a/bjac/939631bb07adb4dc.htm" target="_blank" rel="external nofollow" >jquery關燈特效</a></li>

<li><a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" target="_blank" rel="external nofollow" >可改變大小DIV層</a></li>

</ul>

<div class="lb"><a href="http://keleyi.com/menu/jquery/" target="_blank" rel="external nofollow" target="_blank">jQuery</a>   <a href="http://keleyi.com/menu/javascript/" target="_blank" rel="external nofollow" target="_blank">Javascript</a>   <a href="http://keleyi.com/menu/cms/" target="_blank" rel="external nofollow" target="_blank">CMS</a> </div>

</div>

</div>

</body>

</html>

原文:http://keleyi.com/a/bjac/nk1dr8xn.htm

繼續閱讀