请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
change me
上面的 div 元素可以拖曳右下角改变大小。该 div 能够实时、精准显示自身的高度和宽度尺寸,不论元素以何种方式改变尺寸。这得益于 JS 的 ResizeObserver API接口,它可以监视元素的相关变化,包括本例所用到的监测指定元素的宽高尺寸。下面给出本文示例的完整代码:
<style>
#mydiv {
margin: 20px;
width: 400px;
min-width: 200px;
height: 200px;
min-height: 100px;
border: 1px solid tan;
overflow: hidden;
box-sizing: border-box;
resize: both;
padding: 10px;
}
</style>
<div id="mydiv">change me</div>
<script>
const resizeObserver = new ResizeObserver(() => {
mydiv.innerText = '宽:' + mydiv.offsetWidth + '\n高:' + mydiv.offsetHeight;
});
resizeObserver.observe(mydiv);
</script>
|