访问Polymer元素的children元素的clientWidth和clientHeight

Question

我定义了以下 Polymer 1.0 元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="us-states">
<style type="text/css">
  :host {
    display: block;
  }
  #div {
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
  #svg {
    width: 150px;
    height: 150px;
  }
</style>
<template>
<div id="div">
</div>
<svg id="svg">
  <path d="M 10 10 L 30 10 L 20 30 z" fill="orange" stroke="black" stroke-width="3" />
</svg>
</template>
</dom-module>
<script type="text/javascript">
  Polymer({
    is: "us-states",
    properties: {},
    ready: function() {
      var div = this.$.div;
      var svg = this.$.svg;
      console.log("Div width and height: " + div.clientWidth + " " + div.clientHeight);
      console.log("SVG width and height: " + svg.clientWidth + " " + svg.clientHeight);
      console.log("This width and height: " + this.clientWidth + " " + this.clientHeight);
    }
  });
</script>

我看到的问题是，当在Chrome中执行ready（）函数时，所有clientWidth / clientHeight值都为0.。

但是，当我在函数末尾设置断点并手动打印值时，我得到了我期望的值。同样，当我检查Scope Inspector调试器工具中的值时。

查看截图（在ready（）函数的最后一行的断点处拍摄）

有趣的是，在Firefox上我得到了我期望的this.client {Height，Width}和div.client {Height，Width}的值，但是svg元素为零。

所以我的问题是，访问我的自定义元素的孩子的宽度和身高的正确方法是什么？

P.S。我在Mac上运行Chrome 44.0.2403.125（64位）

Answer 1

您应该使用this.$.div和this.$.svg选择器来利用自动节点查找功能。 $$方法应该用于定位动态创建的节点。

您可以在官方documentation找到更多信息。

使用修改后的代码查看此JSbin。

Answer 2

我遇到了类似的问题，@ ebidel的this.async提示是一个很好的启动提示，最终我发现我需要向异步添加一个短的（1ms）延迟来查看值。我不知道为什么，但以下对我有用。

＆＃13;

＆＃13;

            attached: function() {
                this.async( function() {
                    console.log(this.clientWidth);
                }, 1);
            },

＆＃13;

＆＃13;

＆＃13;