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 идентификатор=separator на основе высоты mainContent когда высота mainContent изменения.



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

531   4  

4 ответов:

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

есть два способа отслеживать изменения css.

  1. Проверьте элемент DOM для изменений css каждый раз x (500 миллисекунд в Примере).
  2. вызвать событие, когда вы изменить элемент css.
  3. использовать 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, второй вариант является гораздо более элегантным и эффективным способом сделать это.

документы:

  • связать:Description: Attach a handler to an event for the elements.
  • триггер:Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
54  
2014-03-19 12:09:59

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

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

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

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

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

44  
2017-11-15 07:22:59

ради будущего я опубликую это. Если вам не нужно поддерживать

вот ссылка на 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();

Проверьте документация MDN для получения дополнительной информации

6  
2015-06-27 02:13:36

еще один простой пример.

для этого образца мы можем использовать 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>

действия:

  1. мы создали DIV блок элемент для изменения размера operatios
  2. добавить простой код JavaScript с помощью:
    • jQuery bind
    • jQuery resizer с действием триггера "resize" - триггер-это самое главное в моем пример
  3. после изменения размера вы можете проверить информацию о предупреждении браузера

вот и все. ; -)

2  
2013-02-27 17:20:21

Comments

    Ничего не найдено.
Click here to cancel reply.