Question

ResizeSensor 到底如何使用？

2017-02-22

12875

javascript jquery html dynamic resize

我的目标是每次扩展的 textarea 元素的大小发生变化时运行一个 javascript 函数，从其他问题中我发现了这个： http://marcj.github.io/css-element-queries/

我下载了它并将 css-element-queries 文件夹放在服务器上，并将其包含在标头中：

<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>

然后在下面使用的 javascript 文件中，我有

ResizeSensor(document.getElementById('the_id'), function(){
console.log("resized");
the_function();
});

但它什么也没做并给出错误：

Uncaught TypeError：无法读取 null 的属性“length” at forEachElement (ResizeSensor.js:46) at ResizeSensor （ResizeSensor.js:201）

Answer 1

您可以改用这个库： https://github.com/sdecima/javascript-detect-element-resize

这是其他库所基于的。

Answer 2

我不确定 ElementQueries 是否是您问题的正确解决方案。

如果元素已达到特定大小，则元素查询用于应用特定 CSS。

例如，以下是您的 HTML：

<div class="widget-name">
    <h2>Element responsiveness FTW!</h2>
</div>

并且您定义如下 CSS 规则：

.widget-name h2 {
    font-size: 12px;
}

.widget-name[min-width~="400px"] h2 {
    font-size: 18px;
}

.widget-name[min-width~="600px"] h2 {
    padding: 55px;
    text-align: center;
    font-size: 24px;
}

.widget-name[min-width~="700px"] h2 {
    font-size: 34px;
    color: red;
}

现在元素查询执行以下操作：如果容器 widget-name 的大小为 700px 或更小，则应用规则 .widget-name[min-width~="700px"] h2 。如果容器 widget-name 的大小为 600 或更小，则应用规则 .widget-name[min-width~="600px"] h2 。

我希望这个答案可以解释一下。

Answer 3

我使用了粘性式键插件时遇到了这个问题，终于找到了解决方案：

import resizeSensor.js 您应该这样使用它：

285473853