Cantのアクセスエレメントmargin-left

Question

次のスニペットでは、margin-leftのCSSプロパティ.circleにアクセスできないようです。これを紹介するPLUNKrを作成しました。

left-marginが必要なモバイルでプロパティバインディングの計算を調整する必要があるため、このプロパティにアクセスしようとしています。

これは私が持っているものの内訳です：私はmarginので、あなたのコード

<div class="circle" [ngStyle]="{'width': calcCircleWidth()}"></div> 

.circle { 
    margin: 40px 20px; 
} 

に基づいてvar html: HTMLElement

html \\ <div class="circle" _ngcontent-iai-1="" style="width: 50%;"> 
html.style \\ CSS2Properties { width: "50%" } 
html.style.marginLeft \\ (nothing) 

Answer 1

の性質をログインしたときに

<div class="circle" [ngStyle]="{'width': calcCircleWidth()}"></div> 

.circle { 
    margin: 40px 20px; 
} 

private calcCircleWidth(): string { 
    var html: HTMLElement = (<HTMLElement>document.querySelector('.circle:first-child')) 
    ... 
} 

これが結果ですNOT a要素のスタイル属性には、DOM要素のstyleメンバからアクセスできません。アカウントにスタイル属性とCSSを取る計算スタイルを取得するための適切な方法はgetComputedStyleを使用することです

より。ドキュメント：https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle