Javascript 如何观察聚合物中元素的宽度？

我想知道如何能够观察到元素的css属性（如宽度）的变化

我试过这样做，但没有成功。我哪里出错了？可能吗

<polymer-element name="test-resize" attributes="elementWidth">
  <template>
    <p>elementWidth : {{elementWidth}}</p>
  </template>
  <script>
    Polymer({
      elementWidth: 100,
      observe: {
        "clientWidth" : "updateWidth",
      },
      updateWidth: function(oldValue, newValue){
        this.elementWidth = newValue;
      }
    });
  </script>
</polymer-element>

elementWidth:{{elementWidth}}

聚合物({
元素宽度：100，
注意：{
“客户端宽度”：“更新宽度”，
},
updateWidth:函数（旧值、新值）{
this.elementWidth=newValue；
}
});

---

在本例中，我试图观察通常可以从外部访问的

clientWidth

属性。

有一种技术滥用CSS转换并侦听transitionend事件。只有极少数情况下确实需要它（例如，如果您想在画布尺寸以任何方式更改后调整webgl上下文的分辨率）

在css中添加一个转换，使转换事件在宽度/高度更改时触发

:host {
  transition:width 0.01s, height 0.01s;
}

倾听事件并处理你想发生的任何事情

this.addEventListener("transitionend",function(e){
  this.elementWidth = this.clientWidth;
}) 

---

有一种技术滥用CSS转换并监听transitionend事件。只有极少数情况下确实需要它（例如，如果您想在画布尺寸以任何方式更改后调整webgl上下文的分辨率）

在css中添加一个转换，使转换事件在宽度/高度更改时触发

:host {
  transition:width 0.01s, height 0.01s;
}

倾听事件并处理你想发生的任何事情

this.addEventListener("transitionend",function(e){
  this.elementWidth = this.clientWidth;
}) 

---

不推荐使用。。。所以…这真是个坏主意？我想我会想出别的办法，因为我不想让我的网页慢下来。是的，这是个坏主意；）为什么要观察元素的宽度？什么样的过程可以改变它？我做了一个决定。基本上每个单独的页面都在这个更大的容器中，元素

，如果这个元素被调整大小，一切都会变得奇怪。因此，我想跟踪容器的宽度，以便相应地调整所有内容的大小，并更新所有必要的属性，以使滑动工作正常。最佳实践通常是捕获那些明确的更改信号。

窗口

上的

调整大小

事件应因（2）和（3）而触发，并且以编程方式更改宽度至少在理论上是由您控制的（尽管我理解这样做可能会很麻烦）。不建议。。。所以…这真是个坏主意？我想我会想出别的办法，因为我不想让我的网页慢下来。是的，这是个坏主意；）为什么要观察元素的宽度？什么样的过程可以改变它？我做了一个决定。基本上每个单独的页面都在这个更大的容器中，元素

，如果这个元素被调整大小，一切都会变得奇怪。因此，我想跟踪容器的宽度，以便相应地调整所有内容的大小，并更新所有必要的属性，以使滑动工作正常。最佳实践通常是捕获那些明确的更改信号。

窗口

上的

调整大小

事件应因（2）和（3）而触发，并且以编程方式更改宽度至少在理论上是由您控制的（尽管我理解这样做可能会很麻烦）。@Thesamau5抱歉，我的错。不应该让它看起来可以复制。你有什么特别的问题吗？我可以帮你吗？非常感谢。我是通过跟踪你的链接来实现的，但最后我找到了一种不用观察宽度就可以实现的方法。“不过这真是一个奇怪的把戏。”萨缪抱歉，我的错。不应该让它看起来可以复制。你有什么特别的问题吗？我可以帮你吗？非常感谢。我是通过跟踪你的链接来实现的，但最后我找到了一种不用观察宽度就可以实现的方法。不过这真是个奇怪的把戏。