document.body.clientHeight和document.documentElement.clientHeight區別
本章節介紹一下document.body.clientHeight和document.documentElement.clientHeight的區別。
這裡都已html頂部帶有<!doctype html>考慮,因為現在誰寫頁面還會不寫這個命令呢。
看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin:0px; padding:0px; } #antzone { width:200px; height:100px; background:#ccc; margin:50px auto; position:absolute; } </style> <script type="text/javascript"> window.onload = function () { var bodyH = document.body.clientHeight; var documentElementhH = document.documentElement.clientHeight; var str = "bodyH:" + bodyH + "<br/>"; str = str + "documentElementhH:" + documentElementhH; antzone.innerHTML = str; } </script> </head> <body> <div id="antzone"></div> </body> </html>
上面的程式碼中,body是沒有高度的,document.body.clientHeight返回值是0,document.documentElement.clientHeight返回的是頁面可見區域的高度,再來看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin:0px; padding:0px; } body { height:1500px; } #antzone { width:200px; height:100px; background:#ccc; margin:50px auto; position:absolute; } </style> <script type="text/javascript"> window.onload = function () { var bodyH = document.body.clientHeight; var documentElementhH = document.documentElement.clientHeight; var str = "bodyH:" + bodyH + "<br/>"; str = str + "documentElementhH:" + documentElementhH; antzone.innerHTML = str; } </script> </head> <body> <div id="antzone"></div> </body> </html>
設定body的高度,document.body.clientHeight返回值就是這個高度,document.documentElement.clientHeight返回值依然是可見區域的高度。
相關文章
- 怪異模式和標準模式下document.documentElement.clientHeight模式client
- 和區別
- ../和./和/的區別
- if …if 和if …else if 區別
- 和 的區別
- as 和 with的區別
- in 和 exists區別
- LinkedList和ArrayList的區別、Vector和ArrayList的區別
- http和https的區別/get和post的區別HTTP
- undefined 和 null 區別?UndefinedNull
- SSL和TLS 區別TLS
- ./ 和sh 的區別
- JQuery this和$(this)的區別jQuery
- jquery $(this) 和this的區別jQuery
- ClassNotFoundException和NoClassDefFoundError區別ExceptionError
- T和?的區別
- SCSS 和 SASS 區別CSS
- innerHTML 和 innerTEXT 區別HTML
- null和undefined區別NullUndefined
- url和uri區別
- get和post區別
- ++a和a++的區別
- NoClassDefFoundError和ClassNotFoundException區別ErrorException
- $(":input")和$("input")區別
- $(document)和$(window)區別
- input和textarea區別
- localStorage和sessionStorage區別Session
- Session 和 Cookie 區別SessionCookie
- jQuery not()和filter()區別jQueryFilter
- define和defined區別
- restore和recover 區別REST
- memcache和redis區別Redis
- Antelope 和Barracuda區別
- a :hover 和a:hover 區別
- Forword和SendRedirect區別
- rbegin 和 end 區別
- setImageResource和setImageDrawable區別
- Opensturt和Struct區別Struct