Cant 'Zugriffselemente margin-left

Question

Im folgenden Codeausschnitt scheint es mir nicht möglich, auf die aktuelle margin-left css-Eigenschaft von .circle zuzugreifen. Ich habe eine PLUNKr erstellt, die dies zeigt.

Ich versuche auf diese Eigenschaft zuzugreifen, da ich eine Eigenschaftsbindungsberechnung auf Mobile anpassen muss, die left-margin erfordert. Diese

ist ein Zusammenbruch von dem, was ich habe:

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

.circle { 
    margin: 40px 20px; 
} 

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

Dies ist das Ergebnis, wenn ich Eigenschaften log von var html: HTMLElement

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

Answer 1

Basierend auf Ihren Code

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

.circle { 
    margin: 40px 20px; 
} 

Seit margin ist NICHT a Das Attribut style für das Element kann nicht über das Element style des dom-Elements aufgerufen werden.

Mehr

Der richtige Weg, um Stil berechnet, die das Stil-Attribut und CSS berücksichtigt ist getComputedStyle zu verwenden. Docs: https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle