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는 이를 얻는 여러 가지 방법과 차이점을 소개합니다.
브라우저는 IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox) 4가지입니다.
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