首頁  >  文章  >  web前端  >  基於jQuery實作左右div自適應高度完全相同的程式碼

基於jQuery實作左右div自適應高度完全相同的程式碼

PHP中文网
PHP中文网原創
2017-03-30 09:41:391216瀏覽

最近做前端設計時需要讓左右兩個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


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn