シナリオ 1、要素のスタイル属性は幅/高さに設定されます コードをコピー コードは次のとおりです: test <br>var div = document.getElementsByTagName('div')[0]; (div.style.width); <br> 上記と同様に、el.style.width を使用します。 style 属性に幅が設定されていない場合、次のように el.style.width を使用して幅を取得することはできません。コードをコピーコードは次のとおりです: test <br>var div = document.getElementsByTagName('div')alert(div. style.width); <br> すべてのブラウザで空の文字列が表示されます。ページの CSS にスタイルが埋め込まれている場合でも、次のように取得できません。 コードをコピー コード <div class="codebody" id="code81223">div {width: 100px} <br> testスクリプト> var div = document .getElementsByTagName('div')[0]; 今回は getComputedStyle または currentStyle が役に立ちます。 シナリオ 2、要素はスタイル シートを導入することで幅/高さを設定しますスタイル シートを導入するには 2 つの方法があります。1 つはリンク タグを使用して別の CSS ファイルを導入する方法で、もう 1 つはstyle タグを HTML ページに直接追加します。ここでは 2 番目のテスト方法が使用されます。次のように コードをコピーします コードは次のとおりです。 >div {幅: 100px} <u> </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')); > div は、スタイル属性を設定することも、スタイル シートを導入することもありません。幅と高さ(ブラウザのデフォルト)は、Firefox/IE9/Safari/Chrome/Opera では取得できますが、IE6/7/8 では取得できず、auto が返されます。 ここでの getStyle メソッドは最初に getComputedStyle を使用しており、IE9 はすでにこのメソッドをサポートしていることに注意してください。したがって、IE9では幅と高さが取得できます。ただし、IE6/7/8 ではサポートされていないため、currentStyle を使用してのみ取得できます。 シナリオ 3: 要素は style 属性を設定せず、スタイル シートも導入しません コードをコピーします コードは次のとおりです: テスト function getStyle(el,name) { if(window.getComputedStyle) { return window.getComputedStyle(el, null)[name]; }else{ return el.currentStyle[name]; } } function getWH(el, name) { var val = name === "width" ? el.offsetWidth : el.offsetHeight, どれ = 名前 === "幅" ? ['左', '右'] : ['上', '下']; // 表示なし if(val === 0) { return 0; } for(var i = 0, a; a = what[i ];) { val -= parseFloat( getStyle(el, "border" a "Width") ) || 0; val -= parseFloat( getStyle(el, "padding" a) ) || 0; } 戻り値 'px'; } var div = document.getElementsByTagName('div')[0]; alert(getWH(div, 'width')); 思考回路の最初の部分: 要素の offsetWidth/offsetHeight を取得し、要素のパディングとボーダーを削除します。