JS中各種size總結

?????? 最近在做項目中,涉及到獲取瀏覽器和元素的高寬以及相關size糙置。用的時候有些會有混淆,所以今天就來總結一下~


一.??? window對象

window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth 瀏覽器視口寬度(不包括工具欄和滾動條)

window.inneHeight || document.documentElement.clientHeight || document.body.clientHeight 瀏覽器視口高度(不包括工具欄和滾動條)

window.outerWidth? 瀏覽器窗口的寬度(包含地址欄工具欄)(IE沒有提供取得當前瀏覽器窗口尺寸的屬性)


window.outerHeight 瀏覽器窗口的高度 (包含地址欄工具欄)(IE沒有提供取得當前瀏覽器窗口尺寸的屬性)

screen.width 顯示屏幕的寬度

screen.height 顯示屏幕的高度

screen.availHeight 返回顯示屏幕的高度 (除 Windows 任務欄之外)

screen.availWidth 返回顯示屏幕的寬度 (除 Windows 任務欄之外)

[轉]

頁可見區(qū)域寬: document.body.clientWidth;

網頁可見區(qū)域高: document.body.clientHeight;

網頁可見區(qū)域寬: document.body.offsetWidth?? (包含邊線的寬);

網頁可見區(qū)域高: 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;

屏幕可用工作區(qū)高度: window.screen.availHeight;


二.? 元素

在網上找到這個圖。

event.clientX 相對文檔的水平座標

event.clientY 相對文檔的垂直座標

event.offsetX 相對容器的水平坐標

event.offsetY 相對容器的垂直坐標

element.offsetWidth,element.offsetHeight: box 的總大小。包括 border, padding, content择示。不包括 margin

element.clientWidth,element.clientHeight: box 中內容區(qū)域的大小。包括 padding, content不包括 margin, border

scrollTop:已滾動過去的高度

scrollHeight:可滾動內容的總高度

offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置

offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置

錯誤之處晒旅,還請大家多多指教~~



最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末栅盲,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子废恋,更是在濱河造成了極大的恐慌谈秫,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鱼鼓,死亡現(xiàn)場離奇詭異拟烫,居然都是意外死亡,警方通過查閱死者的電腦和手機迄本,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門硕淑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人嘉赎,你說我怎么就攤上這事置媳。” “怎么了公条?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵拇囊,是天一觀的道長。 經常有香客問我靶橱,道長寥袭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任关霸,我火速辦了婚禮传黄,結果婚禮上,老公的妹妹穿的比我還像新娘谒拴。我一直安慰自己尝江,他們只是感情好,可當我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布英上。 她就那樣靜靜地躺著炭序,像睡著了一般。 火紅的嫁衣襯著肌膚如雪苍日。 梳的紋絲不亂的頭發(fā)上惭聂,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天,我揣著相機與錄音相恃,去河邊找鬼辜纲。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的耕腾。 我是一名探鬼主播见剩,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼扫俺!你這毒婦竟也來了苍苞?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤狼纬,失蹤者是張志新(化名)和其女友劉穎羹呵,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體疗琉,經...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡冈欢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了盈简。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片凑耻。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖送火,靈堂內的尸體忽然破棺而出拳话,到底是詐尸還是另有隱情先匪,我是刑警寧澤种吸,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站呀非,受9級特大地震影響坚俗,放射性物質發(fā)生泄漏。R本人自食惡果不足惜岸裙,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一猖败、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧降允,春花似錦恩闻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至翅楼,卻和暖如春尉剩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背毅臊。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工理茎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓皂林,卻偏偏與公主長得像朗鸠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子础倍,可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內容

  • Window和document對象的區(qū)別 window對象window對象表示瀏覽器中打開的窗口window對象是...
    FConfidence閱讀 2,211評論 0 5
  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 890評論 0 0
  • 一童社、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示)著隆,會使用HT...
    凜0_0閱讀 2,777評論 0 8
  • 我是米粒小姐扰楼,我愛檸檬汁、檸檬夾心餅干美浦、檸檬茶以及等等和檸檬有關的東西! 他是豆子先生弦赖,他也愛檸檬...
    檸檬樹下的米粒閱讀 570評論 2 3
  • 去年十月份我去看了Rm的南京fm 朋友對他們不感興趣我就自己去了也沒想過找志同道合的飯一起去 主要因為自己不敢和陌...
    我的貓閱讀 395評論 0 1