検索

ホームページ  >  記事  >  ウェブフロントエンド  >  さまざまなシナリオでの要素の幅と高さの実装コードを取得_JavaScript スキル

さまざまなシナリオでの要素の幅と高さの実装コードを取得_JavaScript スキル

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

シナリオ 1、要素のスタイル属性は幅/高さに設定されます

コードをコピー コードは次のとおりです:

test

<script> <br>var div = document.getElementsByTagName('div')[0]; (div.style.width); <br></script>

上記と同様に、el.style.width を使用します。 style 属性に幅が設定されていない場合、次のように el.style.width を使用して幅を取得することはできません。

コードをコピーコードは次のとおりです:
test

<script> <br>var div = document.getElementsByTagName('div')alert(div. style.width); <br></script>


すべてのブラウザで空の文字列が表示されます。ページの CSS にスタイルが埋め込まれている場合でも、次のように取得できません。


コードをコピー コード

test
スクリプト>
var div = document .getElementsByTagName('div')[0];
今回は getComputedStyle または currentStyle が役に立ちます。
シナリオ 2、要素はスタイル シートを導入することで幅/高さを設定します
スタイル シートを導入するには 2 つの方法があります。1 つはリンク タグを使用して別の CSS ファイルを導入する方法で、もう 1 つはstyle タグを HTML ページに直接追加します。ここでは 2 番目のテスト方法が使用されます。次のように



コードをコピーします


コードは次のとおりです。
<script> </a>function getStyle(el, name) { </span>if(window) .getComputedStyle) { </div>return window.getComputedStyle(el, null); <div class="codebody" id="code20743">}else{ <br>return el.currentStyle; <br>var div = document.getElementsByTagName(' div')[0 ]; <br>alert(getStyle(div, 'width')); <br><br> <br>100px がすべてのブラウザで表示されます。スタイル シートで定義された要素の幅と高さは、getComputedStyle と currentStyle を通じて取得できることに注意してください。 <br>要素の幅と高さが style 属性またはスタイル シートで設定されていない場合でも、getComputedStyle または currentStyle を使用して取得できますか?答えは、getComputedStyle はできるが、currentStyle はできないということです。次のように<br><br><br><br><br>コードをコピーします<br><br><br> コードは次のとおりです。<br> </div> <br><div>test< div> <br> <script> <br>function getStyle(el, name) { <div class="codetitle">if(window.getComputedStyle) { <span>return window.getComputedStyle(el, null); 🎜>return el. <a style="CURSOR: pointer" data="2181" class="copybut" id="copybut2181" onclick="doCopy('code2181')">} <u>} </u>var div = document.getElementsByTagName('div')[0]; </a>alert(getStyle(div, 'width')); ></script&gt ; </span> </div> <div class="codebody" id="code2181">div は、スタイル属性を設定することも、スタイル シートを導入することもありません。幅と高さ（ブラウザのデフォルト）は、Firefox/IE9/Safari/Chrome/Opera では取得できますが、IE6/7/8 では取得できず、auto が返されます。 <br>ここでの getStyle メソッドは最初に getComputedStyle を使用しており、IE9 はすでにこのメソッドをサポートしていることに注意してください。したがって、IE9では幅と高さが取得できます。ただし、IE6/7/8 ではサポートされていないため、currentStyle を使用してのみ取得できます。 <br>シナリオ 3: 要素は style 属性を設定せず、スタイル シートも導入しません <br><br><br><br><br>コードをコピーします <br><br><br> コードは次のとおりです:<br><div class="codebody" id="code84427"> <br><div>テスト<div> <br> <br>function getStyle(el,name) { <br>if(window.getComputedStyle) { <br>return window.getComputedStyle(el, null)[name]; <br>}else{ <br>return el.currentStyle[name]; <br>} <br>} <br>function getWH(el, name) { <br>var val = name === "width" ? el.offsetWidth : el.offsetHeight, <br>どれ = 名前 === "幅" ? ['左', '右'] : ['上', '下']; <br>// 表示なし <br>if(val === 0) { <br>return 0; <br>} <br>for(var i = 0, a; a = what[i ];) { <br>val -= parseFloat( getStyle(el, "border" a "Width") ) || 0; <br>val -= parseFloat( getStyle(el, "padding" a) ) || 0; <br>} <br>戻り値 'px'; <br>} <br>var div = document.getElementsByTagName('div')[0]; <br>alert(getWH(div, 'width')); <br></script>

思考回路の最初の部分: 要素の offsetWidth/offsetHeight を取得し、要素のパディングとボーダーを削除します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：TextArea は maxlength ソリューション (jquery)_jquery をサポートしていません次の記事：TextArea は maxlength ソリューション (jquery)_jquery をサポートしていません

関連記事

続きを見る