html - 无法访问元素 margin-left

Question

在下面的代码片段中，我似乎无法访问 .circle 的当前 margin-left css 属性。我创建了一个 PLUNKr展示了这一点。

我正在尝试访问此属性，因为我需要在需要 left-margin 的移动设备上调整属性绑定(bind)计算。

这是我所拥有的分割:

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

.circle {
    margin: 40px 20px;
}

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

这是我记录 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;
}

因为 margin 不是元素的样式属性，所以您不能从 dom 元素的 style 成员访问它。

更多

获取考虑样式属性和 CSS 的计算样式的正确方法是使用getComputedStyle。文档:https://developer.mozilla.org/en/docs/Web/API/Window/getComputedStyle 🌹