web-dev-qa-db-fra.com

jquery - Comment déterminer si une div change de hauteur ou n’importe quel attribut css?

Je veux savoir comment déclencher un événement quand une div change de hauteur ou n’importe quel attribut css.

J'ai un div avec id = mainContent. Je veux que jquery déclenche automatiquement un événement quand il change de hauteur. J'ai fait quelque chose comme ça:

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

Je sais que c'est faux.

Voici tout mon code (j'ai tout collé parce que je ne peux pas entrer dans jsfiddle pour une raison que je ne sais pas):

<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>

J'essaie d'ajuster la hauteur du div id = separator en fonction de la hauteur de mainContent chaque fois que la hauteur de mainContent change.

PS: Dans ce cas, je sais que je peux utiliser l'événement button pour le faire, mais je veux que la div déclenche l'événement lorsque la hauteur est modifiée. S'il vous plaît aider. Merci d'avance.

javascriptjquerycss
64
NinjaBoy

Tout d’abord, il n’existe aucun événement de ce type, mais vous pouvez en créer un par vous-même, car onchange est pour :input éléments seulement. pas pour les changements css.

Il existe deux façons de suivre les modifications css.

  1. Examinez l'élément DOM pour détecter les modifications css toutes les x (500 millisecondes dans l'exemple).
  2. Déclenchez un événement lorsque vous modifiez l'élément css.
  3. Utilisez l'événement de mutation DOMAttrModified. Mais c'est obsolète , donc je vais sauter dessus.

Première manière: 

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

    setTimeout(checkForChanges, 500);
}

Deuxième manière: 

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


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

Si vous contrôlez les modifications CSS, la deuxième option est un moyen beaucoup plus élégant et efficace de le faire.

Documentations:

  • bind : Description: Attach a handler to an event for the elements.
  • déclencheur : Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
58
gdoron

S'il vous plaît ne pas utiliser les techniques décrites dans d'autres réponses ici. Ils ne fonctionnent pas avec les modifications de taille d'animations css3, les modifications de disposition flottantes ou les modifications qui ne proviennent pas de jQuery Land. Vous pouvez utiliser un détecteur de redimensionnement, une approche basée sur les événements, qui ne gaspille pas votre temps processeur.

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

Il contient une classe ResizeSensor que vous pouvez utiliser à cette fin.

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

Disclaimer: J'ai écrit cette bibliothèque

47
Marc J. Schmidt

Pour l'avenir, je posterai ceci. Si vous n'avez pas besoin de prendre en charge <IE11, vous devez utiliser MutationObserver.

Voici un lien vers le caniuse js MutationObserver

Utilisation simple avec des résultats puissants.

    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);

Lorsque vous n'avez plus besoin d'observer, déconnectez-vous.

    observer.disconnect();

Consultez le documentation MDN pour plus d'informations

8
Brandon.Staley

Un autre exemple simple.

Pour cet exemple, nous pouvons utiliser 100x100 DIV-box:

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

Et petite astuce 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>

Étapes:

  1. Nous avons créé un élément de bloc DIV pour redimensionner des opérations
  2. Ajoutez du code JavaScript simple avec:
    • jQuery bind
    • jQuery resizer avec action de déclenchement "redimensionner" - le déclencheur est la chose la plus importante dans mon exemple
  3. Après le redimensionnement, vous pouvez vérifier les informations d’alerte du navigateur.

C'est tout. ;-)

3
Piotr Stępniewski