Question

如何从元素的脚本中获取自定义元素的宽度？

<polymer-element name="his-elem">
  <div>
    blah
  </div>
</polymer-element>

@CustomTag('his-elem')
class blah extends PolymerElement {

  @override
  void attached() {
    // how do I get the <his-elem>'s width (just width, no padding border stuff) here?
    // document.querySelector('his-elem').getComputedStyle().width gives me "auto"...
  }

}

更新

将:host {display: block;}添加到他的元素，然后您可以通过<his-elem>.clientWidth获取实际宽度。

Answer 1

当其他方法不起作用时，我会使用它：

this.getBoundingClientRect().width

另见https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

**在聚合物中<= 0.16

您需要先致电super.attached()

  @override
  void attached() {
    super.attached();
    print(this.getBoundingClientRect().width);
    // or 
    print(this.getComputedStyle().width);
  }

在调用super.attached()之前，该元素尚未附加到DOM并且不会返回适当的宽度。实际上覆盖attached而不是在方法中调用super.attached()来阻止附加。

Answer 2

此表示html元素本身。所以它应该是 this.style.width 。

获取在dart？</polymer-element>中使用<polymer-element>创建的自定义元素的宽度

2 个答案: