JavaScript CSS修正学習第二章様式
3170 ワード
また、要素やリンクに追加されたスタイルの具体的な内容を知りたい場合があります.スタイル属性は要素のインライン形式のスタイルしか読めないので、他のスタイルを読み込むには別の方法を考えなければなりません.
オフセット(Offset)
いくつかのテクニックを使用する前に、IEとMozillaはoffsetSomethingという比較的良い方法を追加しました.これらのプロパティを使用すると、この段落の現在の重要なスタイルを読み取ることができます.
例としてoffsetWidthを使用します.この段落の現在の幅のピクセル値がわかります.テストのために、ウィンドウのサイズを変更してから実行することができます.
コードも非常に簡単です.
この値を警告ボックスとして表示します.alert('offsetWidth='+getOff()です.
これで、この段落のユーザーブラウザ内のピクセル値が得られ、いくつかの演算ができます.次に、読み込むことができる他のプロパティを示します.
offsetHeight:高さのピクセル値
offsetLeft:左からのピクセル値(左は何ですか?下を参照)
offsetTop:上からのピクセル値(上?下を参照)
offsetWidth:幅のピクセル値
これらのプロパティは読み取り専用で、直接変更することはできません.
説明を簡単にするために、小さなコードを用意しました.まずこの段落を移します.
そして私たちは彼の幅を100ピクセル増やしました.このときoffsetWidthを見ると変化が見られます.100ピクセル減らして表示することもできます.
2つのブラウザで確認すると、異なる場合があります.IEでは元の幅+100ピクセルですが、Mozillaでは違います.Mozillaのほうが標準的だからです.彼は内容の幅を見るだけで、IEには余白と枠の幅が加算されます.Mozillaのは比較的に正しいですが、私はIEに傾いています.もっと直感的だからです.
Mozilla/IEの互換性を気にしないなら、コードは簡単です.
変更する値amountを関数に渡し、getOff()関数で元のサイズを取得してyに格納し、最後に元のサイズと変更する値で要素のサイズを再決定します.
offsetWidth/Top
彼らの定義については、前章で確認してください.
スタイルを取得
offset属性の限界が大きいことを示した.ブラウザは要素スタイルにアクセスしやすい方法を提供してくれましたが、残念なことに、彼らの信頼性と汎用性はoffsetに及ばないです.
MozillaとOpera
MozillaとOperaは、JavaScriptではなくcss式の式を使用する傾向があります.たとえば、フォントサイズを得るには、JavaScriptのfontsizeではなくcssのfont-sizeを使用します.
Mozillaでサポートされているスタイルは少ないです.例えばborder[-somthing]はMozillaの中で空の値ですが、Operaは正確な値を与えることができます.
IE
IEでは多くのスタイル情報を得ることができますが、気をつけなければなりません.この例ではborderは機能しません.borderStyle、borderWidth、borderColorが必要です.
注意JavaScriptで方位border-widthプロパティをborderWidthとスペルする必要があります.この接続線はマイナス記号とされる可能性があるからです.
また、IEはauto値を与えることが多い.これは本当の値ですが、何の役にも立たない.だからoffsetを使うこともあります.
コード#コード#
コードは依然として簡単です.
まず、要素のIDとアクセスしたいスタイル名を渡します.
次に、要素をxに保存します.
まずIEの方法:要素のcurrentStyle属性
そして、この関数を呼び出すプログラムにyを返します.
この関数は完璧ではありませんが、もう力の及ぶ限りです.
翻訳先:http://www.quirksmode.org/dom/getstyles.html
転載は以下の情報を保持してください
作者:北玉(tw:@rehawk)
オフセット(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のは比較的に正しいですが、私はIEに傾いています.もっと直感的だからです.
Mozilla/IEの互換性を気にしないなら、コードは簡単です.
function changeOff(amount)
{
var y = getOff();
x.style.width = y + amount;
}
変更する値amountを関数に渡し、getOff()関数で元のサイズを取得してyに格納し、最後に元のサイズと変更する値で要素のサイズを再決定します.
offsetWidth/Top
彼らの定義については、前章で確認してください.
スタイルを取得
offset属性の限界が大きいことを示した.ブラウザは要素スタイルにアクセスしやすい方法を提供してくれましたが、残念なことに、彼らの信頼性と汎用性はoffsetに及ばないです.
MozillaとOpera
MozillaとOperaは、JavaScriptではなくcss式の式を使用する傾向があります.たとえば、フォントサイズを得るには、JavaScriptのfontsizeではなくcssのfont-sizeを使用します.
Mozillaでサポートされているスタイルは少ないです.例えばborder[-somthing]はMozillaの中で空の値ですが、Operaは正確な値を与えることができます.
IE
IEでは多くのスタイル情報を得ることができますが、気をつけなければなりません.この例ではborderは機能しません.borderStyle、borderWidth、borderColorが必要です.
注意JavaScriptで方位border-widthプロパティをborderWidthとスペルする必要があります.この接続線はマイナス記号とされる可能性があるからです.
また、IEはauto値を与えることが多い.これは本当の値ですが、何の役にも立たない.だからoffsetを使うこともあります.
コード#コード#
コードは依然として簡単です.
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) {
次に、要素をxに保存します.
var x = 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 y;
}
この関数は完璧ではありませんが、もう力の及ぶ限りです.
翻訳先:http://www.quirksmode.org/dom/getstyles.html
転載は以下の情報を保持してください
作者:北玉(tw:@rehawk)