如何檢測DIV的尺寸變化？

時間 2020-03-31

標籤如何檢測 div 尺寸變化欄目 CSS 简体版

原文原文鏈接

我有如下示例html，有一個DIV，其寬度爲100％。它包含一些元素。在執行窗口調整大小時，內部元素可能會從新放置，而且div的尺寸可能會更改。我問是否有可能掛鉤div的尺寸更改事件？以及如何作到這一點？我目前將回調函數綁定到目標DIV上的jQuery resize事件，可是，沒有控制檯日誌輸出，請參見如下內容： javascript

<html>
<head>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" language="javascript">
            $('#test_div').bind('resize', function(){
                console.log('resized');
            });
    </script>
</head>
<body>
    <div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
        <input type="button" value="button 1" />
        <input type="button" value="button 2" />
        <input type="button" value="button 3" />
    </div>
</body>
</html>

#1樓

有一種很是有效的方法來肯定元素的大小是否已更改。 css

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

該庫具備ResizeSensor類，可用於調整大小檢測。
它使用基於事件的方法，所以該死的速度很快，而且不會浪費CPU時間。 java

例： react

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

請不要使用jQuery onresize插件，由於它使用setTimeout()循環來檢查更改。
這是緩慢且不夠精確的 。 jquery

披露：我直接與此圖書館有聯繫。 git

#2樓

規範中僅存在Window.onResize ，可是您始終能夠利用IFrame在DIV中生成新的Window對象。 github

請檢查此答案。有一個新的小jquery插件，可移植且易於使用。您始終能夠檢查源代碼以瞭解其完成方式。 jquery插件

<!-- (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...
}

#3樓

我覺得沒法完成，可是後來我想到了，您能夠經過style =「 resize：both;」手動調整div的大小。爲了作到這一點，您必須單擊它，所以添加了一個onclick函數來檢查元素的高度和寬度，而且它能夠正常工做。僅使用5行純JavaScript（確保它可能更短） http://codepen.io/anon/pen/eNyyVN 模塊化

<div id="box" style="
                height:200px; 
                width:640px;
                background-color:#FF0066;
                resize: both;
                overflow: auto;" 
                onclick="myFunction()">
    <p id="sizeTXT" style="
                font-size: 50px;">
       WxH
    </p>
    </div>

<p>This my example demonstrates how to run a resize check on click for resizable div.</p>

<p>Try to resize the box.</p>


<script>
function myFunction() {
var boxheight = document.getElementById('box').offsetHeight;
var boxhwidth = document.getElementById('box').offsetWidth;
var txt = boxhwidth +"x"+boxheight;
document.getElementById("sizeTXT").innerHTML = txt;
}
</script>

#4樓

最好的解決方案是使用所謂的元素查詢 。可是，它們不是標準的，沒有規範-若是您想這樣作，惟一的選擇是使用一種可用的polyfills /庫。

元素查詢背後的想法是容許頁面上的特定容器響應提供給它的空間。這將容許編寫一次組件，而後將其放在頁面上的任何位置，同時它將其內容調整爲當前大小。 不管窗口大小是多少。 這是咱們在元素查詢和媒體查詢之間看到的第一個區別。每一個人都但願在某個時候能夠建立一個規範，以標準化元素查詢（或達到相同目標的東西）並使它們本機，乾淨，簡單且健壯。大多數人都認爲媒體查詢很是有限，對模塊化設計和真正的響應能力沒有幫助。

有一些polyfills /庫以不一樣方式解決問題（儘管能夠稱爲替代方法，而不是解決方案）：

CSS元素查詢-https: //github.com/marcj/css-element-queries
BoomQueries- https://github.com/BoomTownROI/boomqueries
eq.js- https://github.com/Snugug/eq.js
ElementQuery- https://github.com/tysonmatanich/elementQuery
還有一些，我不在這裏列出，但您能夠自由搜索。我沒法說出哪一個當前可用的選項是最好的。您必須嘗試一些並作出決定。

我已經看到了針對相似問題的其餘解決方案。一般他們使用計時器或引擎蓋下的窗口/視口大小，這不是真正的解決方案。此外，我認爲理想上應該主要在CSS中解決，而不是在javascript或html中解決。

#5樓

使用Clay.js（ https://github.com/zzarcon/clay ），檢測元素大小的變化很是簡單：

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。