当document height 发生变化时事件是什么

Question

当document height发生变化时的事件是什么，resize只能用于window吗？

Answer 1

function onElementHeightChange(elm, callback){
    var lastHeight = elm.clientHeight, newHeight;
    (function run(){
        newHeight = elm.clientHeight;
        if( lastHeight != newHeight )
            callback();
        lastHeight = newHeight;

        if( elm.onElementHeightChangeTimer )
            clearTimeout(elm.onElementHeightChangeTimer);

        elm.onElementHeightChangeTimer = setTimeout(run, 200);
    })();
}


onElementHeightChange(document.body, function(){
    alert('Body height changed');
});

试下这个

Answer 2

document height发生变化时的事件是什么？

答案是有好几个，因为不同时代与浏览器、标准背景造成的:

• DOMAttrModified: 属于DOM3标准Mutation events的其中一员，这个也是浏览器之间不太相容的一个标准。IE9部份支持，Webkit类的Chrome与Safari不支持。标准中已弃用，但还有一些旧的浏览器支持。

所以，你要统一性的解决方式，最好使用有人写好的库，或是可以符合从旧到新版本的浏览器的情况。

像这个是attrchange是个jQuery插件，就有考量到上面三种事件。

像这个css-element-queries。

里面有一个ResizeSensor类，可以"感应"出目前被更动了，范例如下:

var element = document.getElementById('myElement');
new ResizeSensor(element, function() {
    console.log('Changed to ' + element.clientWidth);
});

resize只能用于window吗?

是的，只有window有绑定这个事件GlobalEventHandlers.onresize

Answer 3

高度写死的话。不适用，高度自适应可以用这个。

window.addEventListener('resize',() => {
    if(document宽度未改变){
        return false
    }else{
    //js
    }
},false)

Answer 4

你的浏览器坏了？