最近フロントエンドデザインをする際、左右の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 id="右边高度高度左边">右边高度高度左边</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
css怎么实现div缺一个角Jan 30, 2023 am 09:23 AMcss实现div缺一个角的方法：1、创建一个HTML示例文件，并定义一个div；2、给div设置宽高背景色；3、给需要删除一角的div增加一个伪类，将伪类设置成跟背景色一样的颜色，然后旋转45度，再定位到需要去除的那个角即可。
基于 ChatGPT API 的划词翻译浏览器脚本实现May 01, 2023 pm 03:28 PM前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本，openai-translator，短时间内star冲到了12k，功能上除了支持翻译外，还支持润色和总结功能，除了浏览器插件外，还使用了tauri打包了一个桌面客户端，那抛开tauri是使用rust部分，那浏览器部分实现还是比较简单的，今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码，在浏览器控制台中发起请求，就可以完成翻译//示例constOPENAI_API_KEY="s
div盒模型是什么Oct 09, 2023 pm 05:15 PMdiv盒模型是一种用于网页布局的模型，它将网页中的元素视为一个个矩形的盒子，这个模型包含了四个部分：内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距，通过调整内容区域、内边距、边框和外边距的大小，可以实现各种不同的布局效果，盒模型也提供了一些属性和方法，可以通过CSS和JavaScript来动态地改变盒子的样式和行为。
iframe和div有什么不同Aug 28, 2023 am 11:46 AMiframe和div的不同是iframe主要用于引入外部内容，可以加载其他网站的内容或将一个网页分割成多个区域，每个区域有自己的独立的浏览上下文，而div主要用于分割和组织内容的区块，用于布局和样式控制。
div与span的区别有哪些Nov 02, 2023 pm 02:29 PM区别有：1、div是一个块级元素，span是一个行内元素；2、div会自动占据一行，span则不会自动换行；3、div用于包裹比较大的结构和布局，span用于包裹文本或者其他行内元素；4、div可以包含其他块级元素和行内元素，span可以包含其他行内元素。
如何将两个div并排显示Nov 01, 2023 am 11:36 AM方法有：1、将两个div元素设置为“float:left;”属性；2、使用CSS的flex布局可以轻松实现元素的并排显示；3、使用CSS的grid布局也可以实现元素的并排显示。
jQuery技巧：掌握在div中添加标签的方法Feb 23, 2024 pm 01:51 PM标题：jQuery技巧：掌握在div中添加标签的方法在网页开发中，经常会遇到需要动态添加标签到页面中的情况。使用jQuery可以方便地操作DOM元素，实现快速的标签添加功能。本文将介绍如何使用jQuery在div中添加标签的方法，并附上具体的代码示例。1.准备工作在使用jQuery之前，需要在页面中引入jQuery库，可以通过CDN链接引入，也可以下载到本
如何在css中让div居中Oct 12, 2023 am 10:07 AM在css中让div居中的方法有使用margin属性、flexbox布局、绝对定位和使用grid布局等。详细介绍：1、使用margin属性，最简单的方法是使用margin属性，通过设置左右margin为auto，可以将div水平居中；2、使用flexbox布局，Flexbox是CSS3中引入的一种弹性盒子布局模型，可以方便地实现元素的居中；3、使用绝对定位，通过使用绝对定位等等。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
メモ帳++7.3.1
使いやすく無料のコードエディター
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
ホットトピック
7444
15137152