js監聽div元素的寬高變化

lansheng228 發布于2019-08-23 18:21 / 1134人閱讀

摘要：構造函數，參數為回調函數構造函數為，它在監聽到中的改變并且一系列改變結束后觸發回調函數。是要監聽的元素，為監聽選項對象，可選的選項如下所以監聽元素寬高變化，就是監聽屬性變化這樣當元素發生變化時，就會觸發構造函數中的函數。

一、js監聽window變化的方法 1、onsize只能監聽window對象的變化

(1)、 window對象原生、jQuery方法

//原生寫法
window.onsize = function(){
    console.log("11");
}

//jquery寫法
$(window).resize(function(){
    console.log("22");
})

//注意：瀏覽器窗口大小改變時，這段代碼會執行多次，對性能影響大，容易造成瀏覽器假死。

(2)、實現不管窗口怎么改變，只在停止改變之后才執行代碼

var resizeTimer = null;

$(window).resize(function(){
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function(){
        console.log("窗口改變")
    },100)
})

//通過使用定時器的方式來讓代碼延遲執行，每次窗口改變的時候就清除事件，只有停下改變之后才會繼續再執行，解決resize執行多次的問題。

二、js監聽div容器變化的方法 1、MutationObserver

（1）、介紹： MutationObserver 可以用來監聽整個DOM中的變化。

（2）、構造函數，參數為回調函數

構造函數為window.MutationObserver，它在監聽到DOM中的改變并且一系列改變結束后觸發回調函數。他與事件不同的是：它在DOM變化時，會記錄每一個DOM的變化（為一個MutationRecord對象），到DOM變化結束時觸發回調函數。DOM變化可能是一系列的（比如同時改變寬和高），那么這一系列的變化就會產生一個隊列，這個隊列會作為參數傳遞給回調函數。

由于瀏覽器差異。一些版本的瀏覽器各自支持了構造函數，但是用法一致的。實例化一個觀察者，代碼如下：

let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
let observer = new MutationObserver(callback);

（3）、常用三個API接口

1??、observe(element,options) 配置MutationObserver在DOM更改匹配給定選項時，通過其回調函數開始接收通知。
element是要監聽的DOM元素，options為監聽選項對象，可選的選項如下：

所以監聽元素寬高變化，就是監聽style屬性變化

observer.observe(element,{attributes:true,attributeFilter:["style"],attributeOldValue:true});

//這樣當元素style發生變化時，就會觸發構造函數中的callback函數。即：

let observer = new MutationObserver(callback) ，觸發這里的callback。

2??、 disconnect()??阻止?MutationObserver?實例繼續接收的通知，直到再次調用其observe方法，該觀察者對象包含的回調函數都不會再被調用。

3??、 takeRecords()?從MutationObserver的通知隊列中刪除所有待處理的通知，并將它們返回到一個MutationRecord對象構成的新數組中。

2、vue示例

注意：這里記錄了舊的寬高數據來避免重復觸發回調函數，這樣做的原因在于寬高數據改變時，不一定是整數，而MutationRecord.recordOldValue中記錄的是取整后的數據，這樣就會導致在拖動改變DOM元素的寬高時，數值一直在整數和小數之間跳動，會多次觸發。

云服務器 GPU云服務器 js 監聽數據變化 asp獲取屏幕的寬高 js清除div元素 div添加元素的js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105082.html

監聽div的resize

摘要：上網找了找，對于的事件的監聽，實現方式有很多，比如基于的小插件通過元素進行監聽來監聽元素基于的周期性檢查雖然是實現了對元素寬高的監聽，但看上去很瓜。簡單點說，就是：在被監聽的 div 中添加 iframe 標簽，設置其高寬均為 100%；在 iframe 的 resize 被觸發時，則表明 div 的大小正在改變！參考 Resize on div el...

TNFE 2019-08-23 12:10 評論0 收藏0
監聽div的resize

摘要：上網找了找，對于的事件的監聽，實現方式有很多，比如基于的小插件通過元素進行監聽來監聽元素基于的周期性檢查雖然是實現了對元素寬高的監聽，但看上去很瓜。簡單點說，就是：在被監聽的 div 中添加 iframe 標簽，設置其高寬均為 100%；在 iframe 的 resize 被觸發時，則表明 div 的大小正在改變！參考 Resize on div el...

legendaryedu 2019-08-02 11:37 評論0 收藏0
如何優雅監聽容器高度變化

摘要：哈哈哈哈，以上純屬虛構，不過在最近項目中還真遇到過對容器監聽高寬變化在使用或滾動插件，如果容器內部元素有高度變化要去及時更新外部包裹容器，即調用方法。處理很簡單，只需在動畫停止事件觸發時監聽高寬變化即可。前言老鳥：怎樣去監聽 DOM 元素的高度變化呢？菜鳥：哈哈哈哈哈，這都不知道哦，用 onresize 事件鴨！老鳥扶了扶眼睛，空氣安靜幾秒鐘，菜鳥才晃過神來。對鴨，普通 DOM 元...

hizengzeng 2019-08-26 10:20 評論0 收藏0