Maison >interface Web >tutoriel CSS >Comment détecter les modifications de la hauteur de division ou des attributs CSS dans jQuery ?
Déclenchement d'événements sur les modifications CSS
jQuery ne dispose nativement pas d'un événement spécifique gestionnaire pour les modifications d'attributs CSS, y compris les modifications de hauteur. Cependant, il existe deux approches pour résoudre ce problème :
Inspectez régulièrement l'élément DOM pour détecter les modifications CSS à un intervalle prédéfini (par exemple, 500 millisecondes).
<code class="javascript">var $element = $("#elementId"); var lastHeight = $("#elementId").css('height'); function checkForChanges() { if ($element.css('height') != lastHeight) { alert('xxx'); lastHeight = $element.css('height'); } setTimeout(checkForChanges, 500); }</code>
Liez un gestionnaire d'événements personnalisé (« hauteur » dans l'exemple) à l'élément. Déclenchez l'événement chaque fois que vous modifiez son CSS.
<code class="javascript">$('#mainContent').bind('heightChange', function(){ alert('xxx'); }); $("#btnSample1").click(function() { $("#mainContent").css('height', '400px'); $("#mainContent").trigger('heightChange'); //<==== ... }); </code>
La deuxième approche est recommandée si vous contrôlez les modifications CSS, car elle est plus efficace et élégante.
Documentation :
Remarque :
Il y avait un événement de mutation DOMAttrModified obsolète qui permettait de suivre les modifications CSS, mais ce n'est plus recommandé.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!