JS getStyle は最終スタイル関数 code_javascript スキルを取得します

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

#flower {
width:100px ;
font-size:12px;
不透明度:0.5;


定義id= "flower" div 要素を指定し、上記のスタイルを設定します。私たちの目標は、JavaScript

...

を通じてスタイルの最終属性を取得することです。 >

getStyle 関数:

ここでは 3 つのプロトタイプ拡張機能が使用されています
String.prototype.capitalize このメソッドは文字列の最初の文字を大文字にします Array.prototype.contains は指定された文字列があるかどうかを決定します配列内のメンバー String.prototype.camelize これは、「font-size」文字列を「fontSize」に変換するためのものです。この形式は、スタイル



コードをコピー

コードは次のとおりです: String.prototype.capitalize=function(){ return this.charAt(0).toUpperCase( ) this.substring(1).toLowerCase() ; }

Array.prototype.contains=function(A){

return (this.indexOf(A) >= 0); }
String.prototype.camelize=function (){
return this.replace(/-(w)/ig,
function(B, A) {
return A.toUpperCase();
});
}
var css={
getStyle:function(elem,styles){
var 値、
elem=document.getElementById(elem); if(styles == "float"){
document.defaultView ?styles = 'float' /*cssFloat*/ : style='styleFloat';
}
value=elem.style[styles] | | elem.style[styles.camelize()] ;
if(!value){
if (document.defaultView && document.defaultView.getComputedStyle) {
var _css=document.defaultView.getComputedStyle(elem) 、 null);
value= _css ? _css.getPropertyValue(styles) : null;
if (elem.currentStyle){
value = elem.currentStyle[styles.camelize()] ];
}
}
}
if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none "){
value=elem[" offset" style.capitalize()] "px";
}
if(styles == "opacity"){
try {
value = elem.filters['DXImageTransform.Microsoft.Alpha' ].opacity;
value =value/100
}catch(e) {
try {
value = elem.filters('alpha' ).opacity;
} catch(err ){}
}
}
戻り値=="auto" ?
}
}
css。 getStyle("flower","width"); //100px;
css.getStyle("flower","font-size");//12px; ");//left
css.getStyle("flower","opacity");//0.5



まずは基本を確認しましょう

style Standardスタイル！ style属性で指定することも可能です！
runtimeStyle ランタイムスタイル! styleの属性と重複するとstyleの属性は上書きされます！
currentStyle は、style と runtimeStyle の組み合わせを指します。
style インライン スタイル
currentStyle は、グローバル スタイル シート、インライン スタイル、および HTML タグ属性で指定されたオブジェクトの形式とスタイルを表します。

runtimeStyle は、グローバル スタイル シート、インライン スタイル、および HTML タグの形式とスタイルを表します。属性で指定された形式とスタイルの上のオブジェクト
(currentStyle と runtimeStyle は FF では使用できません) getStyle (要素 id, get 属性) 要素のスタイル タグのスタイルを取得します
elem .style[styles] || elem.style[styles.camelize()]
「font-size」の受け渡しをサポートします
ただし、これは最終的なスタイルではありません
最終的なスタイルを取得するには 2 つの方法があります。 style 最後の解決策は
document.defaultView.getComputedStyle //w3c メソッド
で、もう 1 つは elem.currentStyle["..."] //ie メソッド
currentStyle メソッドで "- " を取得する必要があります。文字属性は、String.prototype.camelize




コードをコピーしてください


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

if(value=="auto" && ["width","height"].contains(styles) && elem.style.display!="none"){ value=elem [" offset" style.capitalize()] "px"; } CSSで定義した要素の幅がautoの場合、要素の最終的な幅を取得できません。 offsetWidth と offsetHeight を使用して実際の値を取得できますもちろん、要素が「表示」されていることが前提です。

コードをコピーします

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

try { value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; value =value/100; }catch(e) { try { value = elem.filters('alpha').opacity; } catch(err){}

}

これは透明度を取得する方法です。IE での透明度の定義は他のブラウザとは異なります。フィルターを通じて取得される不透明度の値は /100 である必要があります。標準の不透明度の値 (範囲 0 ～ 1) を返します。