js獲取瀏覽器的高度
Ⅰ js或者jquery如何實時獲取瀏覽器的高度和寬度的
jquery
$(function(){
/*調整窗口自動調整寬度*/
$(window).resize(function(){
var h = $(window).height();
var w = $(window).width();
console.info("窗口高度：" + h + "; 窗口寬度：" + w);
});
});
Ⅱ js載入時獲取瀏覽器高度
document.documentElement.clientHeight
document.documentElement.clientWidth
Ⅲ javascript獲取瀏覽器視口寬高
有文檔聲明的測試代碼：
html代碼
<!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>測試1</title>
<script type="text/javascript">
function show(){
var s = "";
s += "網頁可見區域寬度："+document.body.clientWidth;
s += "\n網頁可見區域高度："+document.body.clientHeight;
s += "\n網頁可見區域寬度（包括邊線）："+document.body.offsetWidth;
s += "\n網頁可見區域高度（包括邊線）："+document.body.offsetHeight;
s += "\n網頁正文寬度："+document.body.scrollWidth;
s += "\n網頁正文高度："+document.body.scrollHeight;
s += "\n屏幕可用工作區域寬度："+window.screen.availWidth;
s += "\n屏幕可用工作區域高度："+window.screen.availHeight;
s += "\n屏幕解析度寬度："+window.screen.width;
s += "\n屏幕解析度高度："+window.screen.height;
alert(s);
}
</script>
</head>
<body style="margin:0;border:0">
<div style="width:2000px;height:90px;margin:0">
<a onclick="show()" href="#">點擊</a>
</div>
</body>
</html>
無文檔聲明的測試代碼
Html代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>測試2</title>
<script type="text/javascript">
function show(){
var s = "";
s += "網頁可見區域寬度："+document.body.clientWidth;
s += "\n網頁可見區域高度："+document.body.clientHeight;
s += "\n網頁可見區域寬度（包括邊線）："+document.body.offsetWidth;
s += "\n網頁可見區域高度（包括邊線）："+document.body.offsetHeight;
s += "\n網頁正文寬度："+document.body.scrollWidth;
s += "\n網頁正文高度："+document.body.scrollHeight;
s += "\n屏幕可用工作區域寬度："+window.screen.availWidth;
s += "\n屏幕可用工作區域高度："+window.screen.availHeight;
s += "\n屏幕解析度寬度："+window.screen.width;
s += "\n屏幕解析度高度："+window.screen.height;
alert(s);
}
</script>
</head>
<body style="margin:0;border:0">
<div style="width:2000px;height:90px;margin:0">
<a onClick="show()" href="#">點擊</a>
</div>
</body>
</html>
Ⅳ js 如何獲取瀏覽器的高度
js獲取瀏覽器可見區域(不包括標題欄、地址欄、收藏夾欄狀態欄等額外區專域，僅為頁面呈現區域屬)的高度和寬度
寬度：document.documentElement.clientWidth
高度：document.documentElement.clientHeight
文檔類型：XHTML1.0
瀏覽器：ALL
Ⅳ 如何用JS動態獲取瀏覽器的寬高
IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
沒有定義W3C的標准，則
IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
Opera為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被捲去的高： document.body.scrollTop
網頁被捲去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕解析度的高： window.screen.height
屏幕解析度的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
示例：
varwinWidth=0;
varwinHeight=0;
functionfindDimensions()//函數：獲取尺寸
{
//獲取窗口寬度
if(window.innerWidth)
winWidth=window.innerWidth;
elseif((document.body)&&(document.body.clientWidth))
winWidth=document.body.clientWidth;
//獲取窗口高度
if(window.innerHeight)
winHeight=window.innerHeight;
elseif((document.body)&&(document.body.clientHeight))
winHeight=document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value=winHeight;
document.form1.availWidth.value=winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
Ⅵ jquery js如何獲取移動設備瀏覽器高度
獲取代碼如下：
<script>
var w=document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
alert(w);
</script>
獲取瀏覽器的高度：jquery代碼直接使用 $(window).height()。
Ⅶ 如何用 js 取得瀏覽器的高度並賦值給div
js 取得瀏覽器的高度並賦值給div的步驟如下：
1. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>
2.請調整瀏覽器窗口大小</h2><hr/><formaction="#"method="get"name="form1"id="form1"><!--
3.顯示瀏覽器窗口的實際尺寸-->瀏覽器窗口的實際高 度:<inputtype="text"name="availHeight"size="4"/><br/>
4.瀏覽器窗口的實際寬度:<inputtype="text"name="availWidth"size="4"/><br/></form><scripttype="text/javascript"><!--varwinWidth=0;varwinHeight=0;functionfindDimensions()
5.//函數：獲取尺寸{//獲取窗口寬度if(window.innerWidth)winWidth=window.innerWidth;elseif((document.body)&&(document.body.clientWidth))winWidth=document.body.clientWidth;//獲取窗口高度document.form1.availHeight.value=winHeight;document.form1.availWidth.value=winWidth;}findDimensions();//調用函數，獲取數值window.onresize=findDimensions;//--></script></body></html>
Ⅷ JS如何獲取瀏覽器有效寬度和高度
jquery:
高度：$(window).height()
寬度：$(window).width();
浮動定位：$(option).css({top:(($(window).height()-$(option).height())/2)+'px'})
option 為你的浮動框識內別容class或識別id
Ⅸ jquery js獲取移動設備瀏覽器高度
在js使用過程中可能會根據要求獲取瀏覽器高度和寬度。
一、獲取瀏覽器的高度：內
jquery代碼直接使用 $(window).height();
原生容態JS代碼需要考慮頁面DOCTYPE的聲明，使用以下代碼：
<script>
var w=document.documentElement?document.documentElement.clientHeight:document.body.clientHeight;
alert(w);
</script>
二、獲取瀏覽器的寬度：
jquery代碼直接使用 $(window).With();
原生態JS代碼：
var w=document.documentElement?document.documentElement.clientWidth:document.body.clientWidth;
Ⅹ 如何用 js 取得瀏覽器的高度並賦值給div
< !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>
<title>請調整瀏覽器窗口</title> <meta http-equiv="content-type" content="text/html; charset=gb2312">
</meta></head>
<body>
<信掘h2 align="center">請調整瀏覽器窗口大小</h2><hr />
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的滑旁核 實際高度: <input type="text" name="availHeight" size="4"/><br />
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"/><br />
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數：獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
//-->
</script>啟祥
</body>
</html>