ホームページ >ウェブフロントエンド >jsチュートリアル >jquery BS、ダイアログ制御適応サイズ_jquery

jquery BS、ダイアログ制御適応サイズ_jquery

WBOY
WBOYオリジナル
2016-05-16 18:50:351171ブラウズ

ちょっとスタイルが悪かったので作り直しましたが、完成してみるとIEではうまく動作せず、アダプティブサイズも実装できませんでした。

xhtml が必要であることが判明しましたが、同社の製品は html です。この目的のために、適応サイズの実装が検討されました。

jquery は幅と高さを取得するのに非常に魔法だといつも思っていましたが、要素が dom に挿入されると、要素の offsetWidth/offsetHeight やその他の属性を直接取得することがわかりました。 dom を使用すると、ブラウザはルールに従って対応する属性を計算します。次に、関連する属性をいくつか示します。

scrollWidth は、エッジの幅を除いたオブジェクトの実際のコンテンツの幅であり、オブジェクト内のコンテンツの量に応じて変化します (コンテンツが多すぎると、オブジェクトの実際の幅が変化する可能性があります)。

clientWidth は、スクロール バーやその他の端を除いたオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。

offsetWidth は、スクロール バーやその他の端を含むオブジェクトの表示幅であり、ウィンドウの表示サイズによって変化します。

clientWidth、offsetWidth、clientHeight.. 違い



IE6.0、FF1.06:
clientWidth = 幅のパディング
clientHeight = 高さのパディング
offsetWidth = 幅のパディング境界線
offsetHeight = 高さのパディング境界線
IE5.0/5.5:
clientWidth = 幅 - 境界線
clientHeight = 高さ - 境界線
offsetWidth = 幅
offsetHeight = height
(言及する必要があります。CSS の margin 属性は clientWidth、offsetWidth、clientHeight、および offsetHeight とは何の関係もありません)

offsetwidth: 親要素に対する相対的な要素のオフセット幅です。 。ボーダーパディング幅と等しい
clientwidth: 要素の表示幅です。パディング幅と等しい
scrollwidth: 要素の幅であり、スクロール部分が含まれます。

実装できない理由を調査しました。 IE の単純な HTML では、jquery.alerts コントロールが div でいっぱいであることがわかります。このようにして得られた offsetWidth ほど、div の幅は増加しないようです。もちろん、XHTML の場合は offsetWidth で十分です。

EXT の実装を見ると、内部コンテンツはコンテンツのサイズに応じて変化するスパンとその他の el を使用して、オフセット属性を取得し、それぞれの幅を取得します。 inner el は、パディングとボーダーを含む加算で、外側のレイヤーの合計幅を計算します。

私も単純にxhtmlを使いたいのですが、方法がありません。 EXTは覚えておいたほうが面倒ですが確実です。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。