JavaScript はドキュメント要素のスタイル属性を読み取って設定します_JavaScript のヒント

まず、スタイル シートの属性について説明します 1. インライン スタイルは、最上位レベルの要素の style 属性に設定されます 2. ページのスタイル シート定義は、page 、次に高いレベルは 3 です。外部リンク スタイル シート ファイル JavaScript は、ドキュメント要素の css 属性を取得および設定します: 1。 , document.getElementById(id) .style.height; はいの場合は属性値を返し、そうでない場合は空を返します IE と Firefox の両方ですが、一部の属性値は異なる方法で返される場合があります。たとえば、色の場合、Firefox は rgb を返しますが、IE は 10 の 16 進数を返します テスト コード: function getCss(){ alert( document.getElementById("aaa").style.height ); alert(document.getElementById("aaa").style.backgroundColor); alert(document.getElementById("aaa").style.width ); document.getElementById("aaa" ).style.backgroundColor = '#dbdbdb'; //script> div id="aaa" class="bbb" style="height:20px;background-color:#FF0000;"> asdfasdfas 2. スタイルが複数の場所で設定されている場合があり、それが外部スタイル シート属性で機能するかインライン スタイルで機能するかがわかりません。したがって、現在のページレンダリングのプロパティ値を取得する必要があります。これは IE と FF では若干異なります。 サンプル コード スニペット: IE: document.getElementById('aaa').currentStyle.height FF 標準: document.defaultView.getComputedStyle(aaa,null)。 getPropertyValue('height') これら 2 つのプロパティは読み取り専用であり、要素のスタイルを変更したい場合は、要素の style 属性に直接記述され、最上位のプロパティがそのプロパティになります。 3. IE および FF 関数と互換性のある属性を記述して

コードをコピーします。コードは次のとおりです。 function getRealStyle(id, styleName) { var element = document.getElementById(id); var realStyle = null; 🎜>realStyle = element.currentStyle[styleName]; else if (window .getComputedStyle) realStyle = window.getComputedStyle(element,null)[styleName]; return realStyle; >

呼び出し: cur_height = parseInt(getRealStyle(CON_ID,' height'));

追伸: 通常、戻り値には単位があり、数値を抽出するには parseInt 関数を使用する必要があります。その後の操作を容易にするため