對div元素的onresize？

Visual Studio突出顯示了我的div標記的onresize屬性，並表示它不是HTML5的有效屬性。這是真的？我應該用什麼來代替？看起來很愚蠢，情況就是如此。對div元素的onresize？

2013-10-12 Oztaco

請不要使用Google 10秒前問爲別人的時間。 https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize「不是規範的一部分。」 –

那篇文章是關於Window的resize事件，它是否適用於像div這樣的元素？而不是規範的一部分並不告訴我它有多少瀏覽器支持，或者它是否具有更有效的規範解決方案。 – Oztaco

@ leaf68首先你用什麼來調整div的大小？提供相關的代碼使我們可以更輕鬆地爲您提供幫助 –

微軟的Internet Explorer支持所有HTML元素的onresize。在所有其他瀏覽器中，onresize僅在window對象上可用。 https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

如果你想還有onResize在所有瀏覽器中div檢查：

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

這個包內有類ResizeSensor可用於resize檢測。

來源

2013-10-17 03:11:09

我已經更新了我的方法，現在比以前的版本更簡單並且更準確。馬克，你應該更新元素查詢的東西來使用這個最新的代碼（backalleycoder是我的博客） – csuwldcat

@csuwldcat，是的它更簡單，但在初始化方式較慢，所以我沒有進一步遵循'對象'方法。 –

添加以下CSS和JavaScript到您的網頁，並使用addResizeListener和removeResizeListener方法來監聽單元尺寸的改變（博客文章進一步的細節：http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/）：

調整尺寸傳感器CSS

.resize-triggers { 
    visibility: hidden; 
} 

.resize-triggers, .resize-triggers > div, .contract-trigger:before { 
    content: " "; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

.resize-triggers > div { 
    background: #eee; 
    overflow: auto; 
} 

.contract-trigger:before { 
    width: 200%; 
    height: 200%; 
}

Resize事件方法

以下是JA您需要啓用調整事件監聽的vaScript。前兩個函數是在主addResizeListener和removeResizeListener方法中使用的先決條件。

(function(){ 

var attachEvent = document.attachEvent; 

if (!attachEvent) { 
    var requestFrame = (function(){ 
     var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || 
       function(fn){ return window.setTimeout(fn, 20); }; 
     return function(fn){ return raf(fn); }; 
    })(); 

    var cancelFrame = (function(){ 
     var cancel = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || 
        window.clearTimeout; 
     return function(id){ return cancel(id); }; 
    })(); 

    function resetTriggers(element){ 
     var triggers = element.__resizeTriggers__, 
      expand = triggers.firstElementChild, 
      contract = triggers.lastElementChild, 
      expandChild = expand.firstElementChild; 
     contract.scrollLeft = contract.scrollWidth; 
     contract.scrollTop = contract.scrollHeight; 
     expandChild.style.width = expand.offsetWidth + 1 + 'px'; 
     expandChild.style.height = expand.offsetHeight + 1 + 'px'; 
     expand.scrollLeft = expand.scrollWidth; 
     expand.scrollTop = expand.scrollHeight; 
    }; 

    function checkTriggers(element){ 
     return element.offsetWidth != element.__resizeLast__.width || 
      element.offsetHeight != element.__resizeLast__.height; 
    } 

    function scrollListener(e){ 
     var element = this; 
     resetTriggers(this); 
     if (this.__resizeRAF__) cancelFrame(this.__resizeRAF__); 
     this.__resizeRAF__ = requestFrame(function(){ 
      if (checkTriggers(element)) { 
       element.__resizeLast__.width = element.offsetWidth; 
       element.__resizeLast__.height = element.offsetHeight; 
       element.__resizeListeners__.forEach(function(fn){ 
        fn.call(element, e); 
       }); 
      } 
     }); 
    }; 
} 

window.addResizeListener = function(element, fn){ 
    if (attachEvent) element.attachEvent('resize', fn); 
    else { 
     if (!element.__resizeTriggers__) { 
      if (getComputedStyle(element).position == 'static') element.style.position = 'relative'; 
      element.__resizeLast__ = {}; 
      element.__resizeListeners__ = []; 
      (element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers'; 
      element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' + 
                '<div class="contract-trigger"></div>'; 
      element.appendChild(element.__resizeTriggers__); 
      resetTriggers(element); 
      element.addEventListener('scroll', scrollListener, true); 
     } 
     element.__resizeListeners__.push(fn); 
    } 
}; 

window.removeResizeListener = function(element, fn){ 
    if (attachEvent) element.detachEvent('resize', fn); 
    else { 
     element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1); 
     if (!element.__resizeListeners__.length) { 
      element.removeEventListener('scroll', scrollListener); 
      element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__); 
     } 
    } 
} 

})();

Demo-licious！

下面是該方法的僞代碼用法。

var myElement = document.getElementById('my_element'), 
    myResizeFn = function(){ 
     /* do something on resize */ 
    }; 
addResizeListener(myElement, myResizeFn); 
removeResizeListener(myElement, myResizeFn);

來源

2013-10-17 04:46:11 csuwldcat

似乎不適用於我：http://jsfiddle.net/t2Aqa/7/ 應該調用resize事件，方法是按下切換按鈕或調整HTML呈現區域的大小，但似乎是隻有在佈局完成後調用一次。我錯過了什麼嗎？ – suamikim

@suamikim是的，在你的addResizeListener處理程序中，你吹掉傳感器元素，方法通過覆蓋目標target.html（target.width（）+'x'+ target）的所有內容來偵聽調整大小。 height（））;' – csuwldcat

@csuwldcat如果您要複製並粘貼來自其他資源的答案，請至少提供參考資料和確認：http://www.backalleycoder.com/2013/03/18/跨瀏覽器事件爲基礎的元素調整大小檢測/ –

只有Window.onResize存在於規範。請記住，每個IFrame元素會創建支持onResize的新對象Window。因此，IMO檢測元素大小變化的最可靠方法是將隱藏的iframe添加到元素中。

如果您對整潔便攜的解決方案感興趣，請檢查this plugin。需要1行代碼來監聽div的寬度或高度變化。

<!-- (1) include plugin script in a page --> 
<script src="/src/jquery-element-onresize.js"></script> 

// (2) use the detectResizing plugin to monitor changes to the element's size: 
$monitoredElement.detectResizing({ onResize: monitoredElement_onResize }); 

// (3) write a function to react on changes: 
function monitoredElement_onResize() {  
    // logic here... 
}

來源

2014-09-10 09:30:35 rbtbar

應該在創建引用之前創建函數（即使它在JS中仍然以另一種方式工作）。 – StanE

雖然IFrame很髒，但您的答案是一個很好的解決方法。 – peterh

這可能沒有任何插件來完成，簡單通過收集所有DIV的一些窗口的數組被描述下here

來源

2017-08-17 08:30:11

對div元素的onresize？

回答

相關問題