jQuery に基づいて左右の div の適応高さを実装する同じコード-jsチュートリアル-php.cn

jQuery に基づいて左右の div の適応高さを実装する同じコード

PHP中文网

リリース： 2017-03-30 09:41:39

オリジナル

1218 人が閲覧しました

最近フロントエンドデザインをする際、左右の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 には、高さを取得するためのいくつかの異なる方法とその違いが紹介されています。
4 つのブラウザとは、IE (Internet Explorer)、NS (Netscape)、Opera、FF (FireFox) です。
ClientHeight
clientHeight については誰もが異論はありませんが、それはコンテンツの表示領域の高さ、つまりコンテンツが表示される領域の高さであると考えられています。ページブラウザ。通常は最後のツールバーからステータスバーの上のこの領域は、ページのコンテンツとは何の関係もありません。
offsetHeight
IE と Opera は、offsetHeight = clientHeight スクロールバーの境界線を信じています。
NS と FF は、offsetHeight が Web ページコンテンツの実際の高さであると考えており、clientHeight よりも小さくなる可能性があります。
ScrollHeight
IE と Opera は、scrollHeight が Web ページコンテンツの実際の高さであると考えており、clientHeight よりも小さくなる可能性があります。
NS と FF は、scrollHeight を Web ページのコンテンツの高さとみなしますが、最小値は clientHeight です。
簡単に言えば、
clientHeight は、ブラウザーを通じてコンテンツが表示される領域の高さです。
NS と FF は、offsetHeight とscrollHeight が両方とも Web コンテンツの高さであると信じていますが、Web コンテンツの高さが clientHeight 以下の場合、scrollHeight の値は clientHeight であり、offsetHeight は clientHeight より小さくなる可能性があります。
IE と Opera は、offsetHeight が表示領域 clientHeight スクロールバーと境界線であると信じています。 scrollHeight は、Web ページコンテンツの実際の高さです。
同様に
clientWidth、offsetWidth、scrollWidth の説明は上記と同じで、高さを幅に置き換えるだけです。

説明
上記は DTD HTML 4.01 Transitional に基づいていますが、DTD XHTML 1.0 Transitional では意味が異なります。XHTML では、これら 3 つの値はすべて同じ値です。コンテンツの実際の高さを表します。ブラウザのほとんどの新しいバージョンは、ページで指定された DOCTYPE に基づいてさまざまなインタープリタの有効化をサポートしています。テストファイルをダウンロードまたは参照します。
関係式：scrollHeight = offsetHeightscrollTop