Question

我制作了一个模块，该模块创建和初始化元素并将其返回给应用程序。然后，应用程序会将其附加到DOM。

我想注册（在初始化期间）元素宽度更改时触发的事件。我知道您可以在调整窗口大小时使用window.resize来接收事件，可能还需要元素的宽度，但是当将元素添加到DOM时宽度也会发生变化（添加之前为0）。有人吗？

Answer 1

在这里您可以检查元素调整大小事件

参考：https://stackoverflow.com/a/39312522/4286794

function outputsize() {
 width.value = textbox.offsetWidth
 height.value = textbox.offsetHeight
}
outputsize()

new ResizeObserver(outputsize).observe(textbox)

Width: <output id="width">0</output><br>
Height: <output id="height">0</output><br>
<textarea id="textbox">Resize me</textarea><br>

Answer 2

您可以使用jquery的“宽度”功能来获取元素的宽度。

<script>
  $("button").click(function(){
  alert("Width of div: " + $("div").width());
  });
</script>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Width of div: " + $("div").width());
  });
});
</script>
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br>

<button>Display the width of div</button>

</body>
</html>

JS：知道元素大小时的事件

2 个答案: