1

JavaScript コードに次の行があります。

if(document.defaultView && document.defaultView.getComputedStyle){
    strValue = document.defaultView.getComputedStyle(oElm).getPropertyValue(strCssRule);
} // ...

ノードの CSS 値を取得するには (例: strCssRule = 'color')。Firefoxで動作します。静的ページの単純な例でのみ Chrome で動作します。複雑なアプリケーションに統合しようとすると、返されるすべてのフィールドCSSStyleDeclarationが null になります。

ノードoElemは jQuery を使用して取得されます ( oElem = $(my_selector).empty().get(0));)。実際の例と私のアプリケーションの違い (少なくとも私が考えることができる唯一のもの) は、ノードが計算時にまだ DOM に統合されていないことです (まだ完全な HTML を生成しています)。

HTML delectation で CSS を明示的に設定しても (たとえば、ノードは です<div style="width:100px;"></div>)、CSSStyleDeclaration オブジェクトはまだ空です。

編集: CBroe で述べたように、問題は要素がまだ DOM にリンクされていないことです。このケースがどのように処理されるかは、ブラウザの実装に依存すると思います。firefox がどのように機能するようになったのかはわかりませんが、何か他のものを見つけるでしょう。

4

1 に答える 1

1

CSS ルールのセレクターを知っていて、それが CSS シートで定義されていることがわかっている場合は、それを検索できます。それが私がこの問題を丸めた方法です。

var page, rule, css;
var selector = ".my_selector";
var sheets = document.styleSheets;
for( page = 0; page < sheets.length; page++ ){
    // if you comment out this if-statement, you can search thru all of the page-wide stylesheets
    if( sheets[page].href.match(/.*\/filename\.css$/) ){
        for( rule = 0; rule < sheets[page].length; rule++ ){
            if( sheets[page][rule].selectorText === selector ){
                css = sheets[page][rule].style;
                break;
            }
        }
        break;
    }
}

// At this point, you have access to the CSS you're looking for.

console.log(css);
alert(css.backgroundColor);

// example from actual code:

if(css.borderTopWidth)this.speaker_default.edge._sizediff=Number(css.borderTopWidth.slice(0,-2));
于 2014-03-27T17:32:44.727 に答える