最近做前端設計時需要讓左右兩個p高度自適應。這其中的jquery程式碼中的獲得高度用的clientHeight,介紹一下幾種不同的取得方式以及他們的差異
完整程式碼:
程式碼如下:
<!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>jQuery实现左右p自适应高度完全相同 - 脚本之家</title> <meta name="Copyright" content="脚本分享网 http://www.jb51.net/" /> <meta name="description" content="jQuery实现左右p自适应高度完全相同" /> <meta content="jQuery实现左右p自适应高度完全相同,JavaScript,分享,JavaScript代码" name="keywords" /> <style type="text/css"> <!-- body{FONT-SIZE: 14px;background-color:#fff} --> </style> <style type="text/css"> #left{background:#999999; float:left; width:100px;} #right{background:#0066FF; color:#fff; width:300px; float:left;} .clear{clear:both;} </style> </head> <body> <h3>右边高度高度左边</h3> <p id="left"> <p style="padding:10px"> <a href="http://www.php.cn/xiazai/js">php中文网特效下载站</a> </p> </p> <p id="right"> <p style="padding:10px"> 是一个以网站设计相关的资源分享网站,网站只提供最优秀的<a href="http://www.php.cn/xiazai/js">JS代码</a>,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的 </div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript"> function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){ $("right").style.height=$("left").offsetHeight + "px"; } else{ $("left").style.height=$("right").offsetHeight + "px"; } } window.onload = function() { getHeight(); } </script> <p style="clear:both"></p> </body> </html>
這其中的jquery程式碼中的獲得高度用的clientHeight,介紹一下幾種不同的取得方式以及他們的差別。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家對clientHeight 都沒有什麼異議,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後一個工具條以下到狀態列以上的這個區域,與頁面內容無關。
offsetHeight
IE、Opera 認為 offsetHeight = clientHeight 捲軸 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小於 clientHeight。
scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度,可以小於 clientHeight。
NS、FF 認為 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。
簡單地說
clientHeight 就是透過瀏覽器看內容的這個區域高度。
NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小於等於 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小於 clientHeight。
IE、Opera 認為 offsetHeight 是視覺區域 clientHeight 捲軸加邊框。 scrollHeight 是網頁內容實際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
說明
以上基於 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 則意義又會不同,在 XHTML 中這三個值都是同一個值,都表示內容的實際高度。新版本的瀏覽器大多支援根據頁面指定的 DOCTYPE 來啟用不同的解譯器。下載或瀏覽測試檔。
關係公式:scrollHeight = offsetHeight scrollTop