js中獲取視窗高度的方法
取視窗滾動條滾動高度
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
取視窗可視範圍的高度
function getClientHeight() { var clientHeight=0; if(document.body.clientHeight&&document.documentElement.clientHeight) { var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } return clientHeight; }
取文件內容實際高度
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
////////////////////////////////////////////////////
在IE中:
document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
document.documentElement.scrollTop =>視窗滾動條滾動高度
在FireFox中:
document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
document.documentElement.scrollTop =>視窗滾動條滾動高度
在chrome中:
document.body.clientWidth ==> BODY物件寬度
document.body.clientHeight ==> BODY物件高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
document.body.scrollTop =>視窗滾動條滾動高度
在Opera中:
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面物件寬度(即BODY物件寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面物件高度(即BODY物件高度加上Margin高
滾動到頂部 window.scrollTo(0,0)
滾動到尾部 window.scrollTo(0,document.body.clientHeight)
js計算滾動條高度及視窗高度
//頁面位置及視窗大小
function GetPageSize() {
var scrW, scrH;
if(window.innerHeight
&& window.scrollMaxY)
{ // Mozilla
scrW =
window.innerWidth + window.scrollMaxX;
scrH = window.innerHeight +
window.scrollMaxY;
}
else if(document.body.scrollHeight >
document.body.offsetHeight)
{ // all but IE Mac
scrW =
document.body.scrollWidth;
scrH = document.body.scrollHeight;
} else
if(document.body)
{ // IE Mac
scrW = document.body.offsetWidth;
scrH = document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // all except IE
winW =
window.innerWidth;
winH = window.innerHeight;
} else if
(document.documentElement &&
document.documentElement.clientHeight)
{ // IE 6 Strict Mode
winW =
document.documentElement.clientWidth;
winH =
document.documentElement.clientHeight;
} else if (document.body) { //
other
winW = document.body.clientWidth;
winH =
document.body.clientHeight;
} // for small pages with total size less
then the viewport
var pageW = (scrW<winW) ? winW : scrW;
var pageH =
(scrH<winH) ? winH : scrH;
return {PageW:pageW, PageH:pageH,
WinW:winW, WinH:winH};
};
//滾動條位置
function GetPageScroll()
{
var x, y;
if(window.pageYOffset)
{ // all except IE
y =
window.pageYOffset;
x = window.pageXOffset;
} else
if(document.documentElement && document.documentElement.scrollTop)
{ // IE 6 Strict
y = document.documentElement.scrollTop;
x
= document.documentElement.scrollLeft;
} else if(document.body) { // all
other IE
y = document.body.scrollTop;
x =
document.body.scrollLeft;
}
return {X:x,
Y:y};
}
jQuery
獲取瀏覽器顯示區域的高度 :
$(window).height();
獲取瀏覽器顯示區域的寬度 :$(window).width();
獲取頁面的文件高度
:$(document).height();
獲取頁面的文件寬度 :$(document).width();
獲取滾動條到頂部的垂直高度
:$(document).scrollTop();
獲取滾動條到左邊的垂直寬度 :$(document).scrollLeft();
計算元素位置和偏移量
offset方法是一個很有用的方法,它返回包裝集中第一個元素的偏移資訊。預設情況下是相對body的偏移資訊。結果包含 top和left兩個屬性。
offset(options, results)
options.relativeTo 指定相對計
算偏移位置的祖先元素。這個元素應該是relative或absolute定位。省略則相對body。
options.scroll 是否把
滾動條計算在內,預設TRUE
options.padding 是否把padding計算在內,預設false
options.margin
是否把margin計算在內,預設true
options.border 是否把邊框計算在內,預設true
alert($(window).height()); //瀏覽器當前視窗可視區域高度
alert($(document).height()); //瀏覽器當前視窗文件的高度
alert($(document.body).height());//瀏覽器當前視窗文件body的高度
alert($(document.body).outerHeight(true));//瀏覽器當前視窗文件body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當前視窗可視區域寬度
alert($(document).width());//瀏覽器當前視窗文件物件寬度
alert($(document.body).width());//瀏覽器當前視窗文件body的高度
alert($(document.body).outerWidth(true));//瀏覽器當前視窗文件body的總寬度 包括border padding margin
// 獲取頁面的高度、寬度
function getPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else {
if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
}
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}
```
// 滾動條
document.body.scrollTop;
$(document).scrollTop();
相關推薦
js中獲取視窗高度的方法
取視窗滾動條滾動高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document
關於JS中獲取瀏覽器高度和寬度值的多種方法(多瀏覽器)
正文 取數 16px javascrip 函數 script meta get ansi 三種瀏覽器獲取值方法 IE中: document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==>
JS中獲取元素的第二種方法
utf display 獲取 重復執行 ecb sed 文檔 練習 elements 1.靜態方法 var oUl = document.getElementById(‘‘); 2.動態方法 document.getElementsByTagName(‘‘);
JS中獲取CSS樣式的方法
不能 pin -c gree 方法 css 命名 width lac 1.對於內聯樣式,可以直接使用ele.style.屬性名(當然也可以用鍵值對的方式)獲得。註意在CSS中單詞之間用-連接,在JS中要用駝峰命名法 如 <div id="dv" style="wid
js中獲取url中引數的方法
JS中獲取url中引數的方法(帶中文的也可以): function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var r =
js中獲取上下文路徑的方法
var path=null; //js獲取專案訪問的url地址的方法 //這樣寫就不用每個jsp頁面都寫個隱藏域傳遞path這個引數了,頁面多的時候比較麻煩 function getRootPath(){ //獲取當前網址,如:http://localhost:8080/supermarket/u
html中的js如何獲取通過POST方法傳遞過來的引數,PHP除錯時print_r ,var_dump的區別
說到輸出,不得不提到PHP中的列印了。 首先當然是最常用的echo了,echo :輸出一個或多個字串; print:和echo一樣,但速度比echo慢。 print_r: 列印關於變數的易於理解的資訊,如果給出的是 string、integer 或 float,將列印變數值本身。
JS中獲取字串中出現次數最多的字母,常用方法
(1)陣列+物件 <script > var str = 'aafcbad'; var obj = {}; var arr = []; var letter; for(var i = 0,len
JS中獲取JSP 中的basePath的方法
轉自原文:https://blog.csdn.net/fuli_mouren/article/details/8992729 var local = window.location; var contextPath = local.pathname.split("/")[1]; var
VC中獲取視窗控制代碼的各種方法
AfxGetMainWnd獲取自身視窗控制代碼 HWND hWnd = AfxGetMainWnd()->m_hWnd; GetTopWindow 函式功能:該函式檢查與特定父視窗相聯的子視窗z序(Z序:垂直螢幕的方向,即疊放次序),並返回在z序頂部的子視窗的控制代碼。 函式原型:HWND GetTop
在js中獲取父頁面以及子頁面物件的方法
在js中,我們時常用到用iframe做系統框架,在子頁面也,父頁面之間的值傳遞是一個問題,下面是js獲取父窗體和子窗體的物件js: 1.在iframe子頁面中獲取父頁面的元素: a>window.parent.document這個是獲取父頁面docu
VC中獲取視窗控制代碼的各種方法 .
AfxGetMainWnd AfxGetMainWnd獲取自身視窗控制代碼 HWND hWnd = AfxGetMainWnd()->m_hWnd; GetTopWindow 函式功能:該函式檢查與特定父視窗相聯的子視窗z序(Z序:垂直螢幕的方向,即疊放次序),並返回在z序頂部的子視窗的控制代碼。 函
【JavaScript】 JS中獲取HTML元素值的三種方法
JavaScript中獲取HTML元素值的三種方法 JS獲取DOM元素的方法(8種): 通過ID獲取(getElementById) 通過name屬性(getElementsByName) 通過標籤名(getElementsByTagName) 通過類
Js中獲取鍵盤的事件
sub 定義 sla set select 做的 aer ren rcu 使用方法: <script type="text/javascript" language=JavaScript charset="UTF-8"> document.onke
Spring中獲取Session的方法匯總
ttr public urn 過去 ets red ole list details Spring: web.xml <listener> <listener-class>org.springframework.web.context.
在Vue.js中引入jQuery的方法:
class img 步驟 500px vue jquery clas npm 技術分享 步驟一:首先先下載jQuery包 cnpm i jquery -D // 下載 jQuery包 步驟二:在webpack.config.js中配置jquery插件 步驟三:
js中use或者using方法
class push 字符 defined != nts rop his lis 看Vue.use方法,想起了以前工作中別人用過的use方法。 var YANMethod = { using:function() { var a = argumen
在js中獲取到的頁面元素為undefined
代碼 有效 查找 才會 直接 為我 defined 資料 報錯 在學習js的過程中發現了一個問題就是:在js代碼中獲取頁面元素進行操作的時候發現怎麽都沒有效果,控制臺也不報錯,彈出獲取的元素結果發現是undefined類型。 後來查找了資料發現:因為我的js是寫在head頭
js中獲取dom元素大小
jsdocument.documentElement這裏的documentElement實際就是整個htmldocument.documentElement.clientWidth/clientHeight可視窗口的大小oDiv.offsetWidth/Height;/clientWidth/clientHe
js(jQuery)獲取時間的方法及常用時間類(轉)
tin isnan gettime max etsec 信息 eva bsp 分割 轉自:http://blog.csdn.net/weiming8517/article/details/25604551 感謝作者分享$(function(){ var mydate =