Question

这不是重复的！我对其他答案的结果不满意。如果您仍然认为它是重复的，请在您认为是重复的原因之前对其进行评论！

我必须观察元素的大小变化。我尝试通过在 offsetWidth 属性上创建一个 setter 来做到这一点：

const div = document.querySelector("div");

div.addEventListener("resize", console.log);
div.addEventListener("click", () => console.log(div.offsetWidth));


let width = div.offsetWidth;
Object.defineProperty(div, "offsetWidth", {
    get: () => width,
  set: val => {
    width = val;
    div.dispatchEvent(new Event("resize"));
  }
});

document.querySelector("button").onclick = () => div.style.width = "200px";

div {
  background-color: #f00;
  width: 300px;
  height: 300px;
}

<div></div>
<button>
Set size
</button>

点击红色框记录尺寸。然后按下按钮。什么都没发生。如果再次单击该框，它仍将显示旧尺寸。为什么这不起作用？

Answer 1

您是否考虑过使用 ResizeObserver？

// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');

// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);

// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
  const e = entries[0]; // should be only one
  console.log(e.contentRect.width);
})

// start listening for size changes
observer.observe(div);

.demo { /* not really relevant. just making it visible. */
  background: skyblue;
  min-height: 50px;
}

<button>Change Size</button>
<div class="demo">Demo</div>

Answer 2

Microsoft 的 Internet Explorer 支持所有 HTML 元素上的 inputs = tf.keras.Input(shape=(32,32,3)) conv_1 = Conv2D(64, kernel_size = (3, 3), padding='same')(inputs) BN_1 = BatchNormalization(axis=-1)(conv_1) pool_1 = MaxPooling2D(strides=(1,1), pool_size=(3,3), padding='same')(BN_1) z0 = Lambda(my_func)(pool_1) ## <================= conv_2 = Conv2D(64, kernel_size = (3, 3), padding='same')(z0) BN_2 = BatchNormalization(axis=-1)(conv_2) pool_2 = MaxPooling2D(strides=(1,1), pool_size=(3,3), padding='same')(BN_2) z1 = Lambda(my_func)(pool_2) ## <================= merged_2 = concatenate([z0, z1], axis=-1) act_2 = Activation('tanh')(merged_2) x = Conv2D(64, kernel_size = (3, 3), padding='same', activation='relu')(act_2) x = BatchNormalization(axis=-1)(x) x = Activation('relu')(x) x = MaxPooling2D(pool_size=(3,3))(x) x = Dropout(0.1)(x) x = Flatten()(x) x = Dense(128)(x) x = BatchNormalization()(x) x = Activation('tanh')(x) x = Dropout(0.1)(x) x = Dense(10)(x) x = Activation('softmax')(x) outputs = x model = tf.keras.Model(inputs=inputs, outputs=outputs) model.summary()。在所有其他浏览器中，onresize 仅适用于 onresize 对象。 https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

如果您想在所有浏览器的 div 上都有 window，请检查：

http://marcj.github.io/css-element-queries/

这个库有一个 onresize 类，可用于 ResizeSensor 检测。

观察元素的大小变化

2 个答案: