JavaScript CSS改造学習 第2章 スタイル_基礎知識

さらに、要素またはリンクに追加されたスタイルの特定の内容を知りたい場合もあります。 style 属性は要素のインライン スタイルのみを読み取ることができるため、他のスタイルを読み取りたい場合は別の方法を見つける必要があります。

Offset
いくつかのトリックを使用する前に、IE と Mozilla はより良いメソッド offsetSomething を追加しました。これらのプロパティを使用すると、この段落のより重要なスタイルのいくつかを読み取ることができます。
たとえば、offsetWidth を使用します。この段落の現在の幅のピクセル値を知ることができます。テストするには、ウィンドウのサイズを変更して再度実行します。
コードも非常に簡単です:

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

function getOff( )
{
x = document.getElementById('test');
return x.offsetWidth;

次に、この値を表示します。アラート ボックスの形式:alert('offsetWidth = ' getOff())。
これで、この段落のピクセル値がユーザーのブラウザに表示され、いくつかの計算を実行できるようになりました。以下に、読み取ることができるその他のプロパティをいくつか示します。
offsetHeight: 高さのピクセル値
offsetLeft: 左への距離のピクセル値 (左は何ですか? 以下を参照)
offsetTop: のピクセル値上の距離 (上にあるものは以下を参照)
offsetWidth: 幅のピクセル値
これらのプロパティは読み取り専用であり、直接変更できないことに注意してください。
説明の便宜上、小さなコードを用意しました。まずこの段落を移動してください。
次に、幅に 100 ピクセルを追加します。このときoffsetWidthを見てみると変化が分かります。 100ピクセルに縮小して表示することもできます。
2 つのブラウザで表示すると、差異が生じる可能性があります。 IE では元の幅は 100 ピクセルですが、Mozilla ではそうではありません。 Mozilla のはより標準的であるため、IE はマージンと境界線の幅を追加しますが、Mozilla はコンテンツの幅のみをチェックします。 Mozilla の方が正確ですが、私は IE の方が直観的であるため好みます。
Mozilla/IE の互換性を気にしない場合、コードは非常に単純です:

コードをコピーします コード

function changeOff(amount)
{
var y = getOff();
x.style.width = y amount; >

変更する値の量を関数に渡し、getOff() 関数を使用して元のサイズを取得し、それを y に格納します。最後に、元のサイズとその値を使用します。要素のサイズを変更するには変更する必要があります。
offsetWidth/Top

その定義については、前の章を参照してください。

スタイルを取得します
offset 属性には大きな制限があることがわかりました。ブラウザでは、要素スタイルにアクセスするためのより便利な方法がいくつか提供されていますが、残念ながら、ブラウザはオフセットほど信頼性と汎用性が高くありません。
Mozilla と Opera
Mozilla と Opera は、JavaScript ではなく CSS スタイルの式を使用することを好みます。たとえば、フォント サイズを取得したい場合は、JavaScript の fontsize ではなく CSS の font-size を使用する必要があります。
Mozilla がサポートするスタイルはほとんどありません。たとえば、border[-somthing] は Mozilla では null 値を持ちますが、Opera では正確な値を与えることができます。
IE
IE では多くのスタイル情報を取得できますが、注意が必要です。この例では、border は機能しません。borderStyle、borderWidth、borderColor が必要です。
JavaScript では、border-width 属性の綴りは borderWidth である必要があることに注意してください。この接続線はマイナス記号とみなされる可能性があるためです。
また、IE では auto 値が与えられることがよくあります。これは実際の値ですが、ほとんど役に立ちません。したがって、場合によってはオフセットを使用する必要があります。

コード
コードはまだ非常に単純です:

コードをコピー コードは次のとおりです: function getStyle(el,styleProp)

{

var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle [styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y; 🎜>
まず、アクセスしたい要素の ID とスタイルの名前を渡します

コードをコピー

コードは次のとおりです: function getStyle( el,styleProp) {
次に、要素を document.getElementById(el) に保存します。

最初は IE メソッドです。要素 の currentStyle 属性です。コードをコピーします

コードは次のようになります:

if (x.currentStyle) 2 var y = x.currentStyle[styleProp];
次に、Mozilla メソッド: getComputeStyle( ) メソッド。これは Opera

[code] else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); でも実現可能です。 その後、この関数を呼び出すプログラムに y を返します。

コードをコピーします

コードは次のとおりです。

return

}

この機能は完璧ではありませんが、それでも機能の範囲内です。 翻訳アドレス: http://www.quirksmode.org/dom/getstyles.html 転載のために以下の情報を保管してください 著者: Bei Yu (tw: @rehawk)