jQuery に基づいて左右の div の適応高さを実装する同じコード
最近フロントエンドデザインをする際、左右の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
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7401
15
1630
14
1358
52
1268
25
1217
29
CSSを使用してdivの角が欠けていることを認識する方法
Jan 30, 2023 am 09:23 AM
div の角が欠けていることを認識するための CSS メソッド: 1. HTML サンプル ファイルを作成し、div を定義します; 2. div の幅と高さの背景色を設定します; 3. 削除する必要がある div に疑似クラスを追加します隅に配置し、擬似クラスを背景色と同じ色を使用するように設定し、45 度回転して、削除する必要がある隅に配置します。
ChatGPT APIに基づくワードマーキング翻訳ブラウザスクリプトの実装
May 01, 2023 pm 03:28 PM
はじめに 最近 GitHub に ChatGPTAPI をベースにしたブラウザスクリプト openai-translator が登場しました 短期間でスターが 12k に達しました 翻訳だけでなく磨きや要約機能もサポートしています ブラウザプラグに加えて-ins, tauri パッケージも使用します。デスクトップ クライアントをお持ちの場合は、tauri が Rust 部分を使用するという事実を除けば、ブラウザ部分の実装はまだ比較的簡単です。今日は手動で実装します。 openAI によって提供されるインターフェイス。たとえば、次のコードをコピーし、ブラウザ コンソールでリクエストを開始して変換を完了できます。 //Example constOPENAI_API_KEY="s
divボックスモデルとは何ですか
Oct 09, 2023 pm 05:15 PM
div ボックス モデルは、Web ページのレイアウトに使用されるモデルです。Web ページ内の要素を長方形のボックスとして扱います。このモデルには、コンテンツ領域、パディング、ボーダー、マージンの 4 つの部分が含まれています。 div ボックス モデルの利点は、Web ページのレイアウトと要素間の間隔を簡単に制御できることであり、コンテンツ領域、内側の余白、境界線、外側の余白のサイズを調整することで、さまざまなレイアウト効果を実現できます。ボックス モデルには、CSS と JavaScript を通じてボックスのスタイルと動作を動的に変更できるいくつかのプロパティとメソッドも用意されています。
divとspanの違いは何ですか?
Nov 02, 2023 pm 02:29 PM
違いは次のとおりです: 1. div はブロックレベル要素であり、span はインライン要素です。2. div は自動的に行を占有しますが、span は自動的に折り返されません。3. div はより大きな構造とレイアウトを折り返すために使用されます。テキストまたは他のインライン要素をラップするために、span が使用されます。4. div には他のブロックレベル要素とインライン要素を含めることができ、span には他のインライン要素を含めることができます。
iframeとdivの違いは何ですか
Aug 28, 2023 am 11:46 AM
iframe と div の違いは、iframe は主に外部コンテンツを導入するために使用され、他の Web サイトからコンテンツをロードしたり、Web ページを複数の領域に分割したりできます。各領域には独自の独立した閲覧コンテキストがあり、div は主に分割および分割するために使用されます。コンテンツを整理し、レイアウトとスタイルを制御するためのブロック。
2つのdivを並べて表示する方法
Nov 01, 2023 am 11:36 AM
方法は、 1. 2 つの div 要素に「float:left;」属性を設定する; 2. CSS のフレックス レイアウトを使用して要素を簡単に並べて表示する; 3. CSS のグリッド レイアウトを使用して要素も並べて表示する; です。
jQuery のヒント: div にタグを追加する方法をマスターする
Feb 23, 2024 pm 01:51 PM
タイトル: jQuery ヒント: div にタグを追加する方法をマスターする Web 開発では、ページにタグを動的に追加する必要がある状況によく遭遇します。 jQuery を使用すると、DOM 要素を簡単に操作し、高速なラベル追加機能を実現できます。この記事では、jQueryを使ってdivにタグを追加する方法と、具体的なコード例を紹介します。 1. 準備作業 jQueryを使用する前に、CDNリンクから導入するか、このページからダウンロードしてjQueryライブラリをページに導入する必要があります。
CSSでdivを中央揃えにする方法
Oct 12, 2023 am 10:07 AM
CSS で div を中央に配置する方法には、マージン属性の使用、フレックスボックス レイアウト、絶対配置、グリッド レイアウトの使用などがあります。詳細な紹介: 1. margin 属性を使用します。最も簡単な方法は、margin 属性を使用することです。左右のマージンを auto に設定すると、div を水平方向に中央に配置できます。2. フレックスボックス レイアウトを使用します。フレックスボックスは、フレキシブル ボックス レイアウト モデルです。 CSS3で導入. 要素の中央揃えを簡単に実現できる; 3.絶対配置などを利用して絶対配置を利用する。
