Question

我的目标是每次扩展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();
});

但它没有做任何事情而且出错：

未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;为null 在forEachElement（ResizeSensor.js：46）在ResizeSensor（ResizeSensor.js：201）

Answer 1

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

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

E.g。以下是您的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 2

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

这是其他人所基于的。

Answer 3

当我使用粘性侧边栏插件时遇到了这个问题，最后我找到了解决方案：

在导入 ResizeSensor.js 之后，您应该像这样使用它：

import ResizeSensor from "resize-sensor";

window.ResizeSensor = ResizeSensor;

究竟如何使用ResizeSensor？

3 个答案: