Question

我有一个聚合物元素，在其Javascript中我试图找到它的宽度和高度，因为它在DOM内部。我尝试了很多方法，但我总是回来。

Answer 1

......这是适合我的那个：

将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 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

您可能想要计算元素的attached处理程序中的宽度，因为当单元实际连接到DOM时，它会是最后一个。

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

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

Answer 4

这应该这样做：

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

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

Answer 5

<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 6

<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>

如何在聚合物元件的JS内获得聚合物元件的宽度

6 个答案: