Jquery - Как определить, изменит ли div его высоту или любой атрибут css?

Я хочу знать, как вызвать событие, когда div изменяет его высоту или любой атрибут css.

У меня есть div с id = mainContent. Я хочу, чтобы jquery автоматически запускал событие, когда он менял свою высоту. Я сделал что-то вроде этого:

$("#mainContent").change('height', function() {
    $("#separator").css('height', $("#mainContent").height());
});

Я знаю его неправильно.

Вот мой весь код (я вложил все это, потому что я не могу попасть в jsfiddle по какой-то причине, я не знаю):

<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

#separator {
 border-right: 1px solid black;
}
</style>

<script type="text/javascript" src="jquery1.6.4min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
 $("#separator").css('height', $("body").height());
});

$(function() {
 $("#btnSample1").click(function() {
  $("#mainContent").css('height', '400px');
  $("#mainContent").css('width', '600px');
  $("#mainContent").css('background-color', '#F0F0F0');
 });

 $("#btnSample2").click(function() {
  $("#mainContent").css('height', '1600px');
  $("#mainContent").css('width', '700px');
  $("#mainContent").css('background-color', '#F0F0F0');     
 });

 $("#mainContent").change('height', function() {
  $("#separator").css('height', $("#mainContent").height());
 });
});
</script>
</head>
<body>
<table style="width: 100%;">
 <tr>
  <td valign="top" style="width: 19%;"> 
   <table id="mainMenu">
    <tr><td><input id="btnSample1" type="button" value="Sample 1"  /></td></tr>
    <tr><td><input id="btnSample2" type="button" value="Sample 2"  /></td></tr>
   </table>
  </td>

  <td valign="top" style="width: 1%;" >
   <div id="separator"></div> 
  </td>

  <td valign="top" style="width: 80%;">
   <div id="mainContent"></div>
  </td>
 </tr>
</table>
</body>
</html>

Я пытаюсь настроить высоту div id = separator зависимости от высоты mainContent всякий раз, когда mainContent высота mainContent.

PS: В этом случае я знаю, что могу использовать событие кнопки для этого, но я хочу, чтобы div запускал событие при изменении высоты. Пожалуйста помоги. Заранее спасибо.

Ответ 1

Во-первых, нет такого события css-changes из коробки, но вы можете создать его самостоятельно, поскольку onchange используется только для :input. а не для css-изменений.

Существует два способа отслеживания изменений css.

Изучите элемент DOM для css, который изменяется каждый раз x (например, 500 миллисекунд).
Запустите событие, когда вы измените элемент css.
Используйте событие мутации DOMAttrModified. Но он устарел, поэтому я пропущу его.

Первый способ:

var $element = $("#elementId");
var lastHeight = $("#elementId").css('height');
function checkForChanges()
{
    if ($element.css('height') != lastHeight)
    {
        alert('xxx');
        lastHeight = $element.css('height'); 
    }

    setTimeout(checkForChanges, 500);
}

Второй способ:

$('#mainContent').bind('heightChange', function(){
        alert('xxx');
    });


$("#btnSample1").click(function() {
    $("#mainContent").css('height', '400px');
    $("#mainContent").trigger('heightChange'); //<====
    ...
});

Если вы управляете изменениями css, второй вариант - намного более элегантный и эффективный способ сделать это.

Documentations:

bind: Description: Attach a handler to an event for the elements.
trigger: Description: Execute all handlers and behaviors attached to the matched elements for the given event type.

Ответ 2

Пожалуйста, не используйте методы, описанные в других ответах здесь. Они либо не работают с изменениями размера анимации css3, плавающими изменениями макета или изменениями, которые не происходят из земли jQuery. Вы можете использовать метод изменения размера, основанный на событиях, который не тратит время на процессорное время.

https://github.com/marcj/css-element-queries

Он содержит класс ResizeSensor, который вы можете использовать для этой цели.

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

Отказ от ответственности: я написал эту библиотеку

Ответ 3

В будущем я опубликую это. Если вам не нужно поддерживать < IE11, то вы должны использовать MutationObserver.

Вот ссылка на caniuse js MutationObserver

Простое использование с мощными результатами.

    var observer = new MutationObserver(function (mutations) {
        //your action here
    });

    //set up your configuration
    //this will watch to see if you insert or remove any children
    var config = { subtree: true, childList: true };

    //start observing
    observer.observe(elementTarget, config);

Если вам больше не нужно наблюдать за отключением.

    observer.disconnect();

Обратитесь к

Ответ 4

Другой простой пример.

Для этого образца мы можем использовать 100x100 DIV-box:

<div id="box" style="width: 100px; height: 100px; border: solid 1px red;">
  Red box contents here...
</div>

И небольшой трюк jQuery:

<script type="text/javascript">
  jQuery("#box").bind("resize", function() {
    alert("Box was resized from 100x100 to 200x200");
  });
  jQuery("#box").width(200).height(200).trigger("resize");
</script>

Шаги:

Мы создали элемент блокировки DIV для изменения параметров
Добавить простой код JavaScript с помощью:
- привязка jQuery
- jQuery resizer с действием триггера "изменить размер" - триггер - самая важная вещь в моем примере
После изменения размера вы можете проверить информацию о предупреждении браузера.

Это все.; -)