聚合物元素的JS内部如何获取聚合物元素的宽度

Question

我有一个聚合物元素，在它的 Javascript 里面我试图找到它在 DOM 里面的宽度和高度。我尝试了很多方法，但我总是得到 0。

Answer 1

<link rel="import" href="../polymer/polymer.html">
<!-- You can import core and paper elements -->
<link rel="import" href="../core-ajax/core-ajax.html">

<!-- 
Here's where you'll define your element. You can define multiple elements
if you want, but the package name will be taken from the first custom
element you define in the file. You can also document your element! For
more info, see [the docs](https://ele.io/docs).

@element hard-chicken
-->
<polymer-element name="hard-chicken" attributes="name">
  <template>
    <style>
      :host {
        font-family: sans-serif;
      }
    </style>
    Hello {{name}}
  </template>
  <script>
    Polymer('hard-chicken', {
      /**
       * The name of the person you want to say hello to.
       * @attribute name
       * @type string
       * @default "Polymer Dev"
       */
      name: 'Polymer Dev',
      ready: function() {
        console.log(this.offsetWidth);
      }
    });
  </script>
</polymer-element>

Answer 2

聚合物 1.0

<link rel="import" href="../polymer/polymer.html">

<!-- 
Here's where you'll define your element. You can define multiple elements
if you want, but the package name will be taken from the first custom
element you define in the file. You can also document your element! For
more info, see [the docs](https://ele.io/docs).

@element hard-chicken
-->
<dom-module id="hard-chicken" attributes="name">
  <template>
    <style>
      :host {
        font-family: sans-serif;
      }
    </style>
    Hello {{name}}
  </template>
  <script>
    Polymer({is:'hard-chicken', 
      /**
       * The name of the person you want to say hello to.
       * @attribute name
       * @type string
       * @default "Polymer Dev"
       */
      name: 'Polymer Dev',
      ready: function() {
        console.log(this.offsetWidth);
    });
  </script>
</dom-module>

Answer 3

<dom-module id="hard-chicken">
  <style>
      :host {
        font-family: sans-serif;
      }
    </style>
  <template>
    Hello <span>{{name}}</span>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'hard-chicken',
    /**
     * The name of the person you want to say hello to.
     * @attribute name
     * @type string
     * @default "Polymer Dev"
     */
    properties: {
      name: {
        value : 'Polymer Dev',
        type: String
      }
    },
    _getWidth: function () {
      console.log(this.offsetWidth);
    },
    ready: function() {
      this.async(this._getWidth, 500);
    }
  });
</script>

Answer 4

您可能想在元素的 attached 处理程序中计算宽度，因为当该单元实际附加到 DOM 时最后出现。

见https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-order

attached: function() {
  console.log(this.offsetWidth);
}

Answer 5

...这是对我有用的：

将 Polymer.IronResizableBehavior 行为添加到您的元素（参见 https://elements.polymer-project.org/elements/iron-resizable-behavior）。然后您的元素将在调整大小时发送一个 iron-resize 事件。在处理程序中，检查它是否不为 0；如果没有，你就是金子。

未经测试的代码如下：

<dom-module id="hard-chicken">
  <template>
    Hello <span>{{name}}</span>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'hard-chicken',
    behaviors: [ Polymer.IronResizableBehavior ],
    listeners: { "iron-resize": "onWidthChange" },
    onWidthChange: function() {
      var w = this.offsetWidth;
      if (w > 0)
        console.log("width is now ", w);
    }
  });
</script>

这就走了，路太长了想不明白...

Answer 6

应该这样做：

attached: function() {
  this.async(function() {
    console.log(this.offsetWidth);
  });
}

阅读文档： https://www.polymer-project.org/1.0/docs/devguide/registering-elements#initialization-order

聚合物元素的JS内部如何获取聚合物元素的宽度

How to get the width of a polymer element inside the JS of the polymer element

web-component

polymer