Question

我即将根据另一个元素调整元素的位置。并且需要知道其他元素的left值。问题是：DOM对象具有样式的export class SomeComponent { ... ShowDropdownContent(dropdown){ console.log(dropdown.style.left);//Loggs an empty string. } ... }属性的空值，而我只是无法获取源元素位置。
假设有这样的事情：

jquery

同时在$('SomeSelector').position().left我们只需拨打：angular json有任何相当于此的内容吗？（特别是当DOM的左侧元素值为空时）。

Answer 1

那是因为style属性引用了元素的style属性。

亲自看看。

const div = document.querySelector('div');

console.log(div.style.background);
console.log(div.style.border);

div {
  border: 1px solid black;
}

<div style="background: red"></div>

依靠getComputedStyle来获得风格。

const div = document.querySelector('div');

const computed = window.getComputedStyle(div);

console.log(computed.getPropertyValue('background'));
console.log(computed.getPropertyValue('border'));

div {
  border: 1px solid black;
}

<div style="background: red"></div>

Answer 2

您可以在nativeElement上调用getBoundingClientRect（）函数：

<select #dropdown>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


export class AppComponent implements AfterViewInit  {
 @ViewChild("dropdown") dropdown:ElementRef;
 constructor() {}
  ngAfterViewInit() {
    // viewChild is set after the view has been initialized
    const rect = this.dropdown.nativeElement.getBoundingClientRect();
    console.log(rect.left);
  }
}

相当于$（'selector'）。当DOM的值为空时位于角度

2 个答案: