摘要:代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://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="脚本分享网 https://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="https://www.jb51.net">脚本之家</a> </p> </p> <p id="right"> <p style="padding:10px"> 是一个以网站设计相关的资源分享网站,网站只提供最优秀的<a href="https://www.jb51.net/">JS代码</a>,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的 </p> </p> <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>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-基于jQuery实现左右div自适应高度完全相同的代码

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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="脚本分享网 https://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="https://www.jb51.net">脚本之家</a>
</p>
</p>
<p id="right">
<p style="padding:10px">
是一个以网站设计相关的资源分享网站,网站只提供最优秀的<a href="https://www.jb51.net/">JS代码</a>,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的
</p>
</p>
<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

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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="脚本分享网 https://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="https://www.jb51.net">脚本之家</a>
</p>
</p>
<p id="right">
<p style="padding:10px">
是一个以网站设计相关的资源分享网站,网站只提供最优秀的<a href="https://www.jb51.net/">JS代码</a>,jQuery插件,网页特效,HTML5代码,矢量图,设计图标,网站模板等,而且这一切都是免费的
</p>
</p>
<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

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-基于jQuery实现左右div自适应高度完全相同的代码

全部内容,希望文章能够帮你解决

js实例教程-基于jQuery实现左右div自适应高度完全相同的代码

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过