javascript - jquery - How to determine if a div changes its height or any css attribute?

Question

Welcome To Ask or Share your Answers For Others

javascript - jquery - How to determine if a div changes its height or any css attribute?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - jquery - How to determine if a div changes its height or any css attribute?

I wanna know how to trigger an event when a div changes its height or any css attribute.

I have a div with id = mainContent. I want jquery to automatically trigger an event when it changes its height. I did something like this:

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

I know its wrong.

Here's my whole code (I pasted all of it because I can't get into jsfiddle for some reason I don't know):

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

I am trying to adjust the height of the div id=separator based on the height of mainContent whenever the height of mainContent changes.

PS: In this case I know I can use the button event to do this but I want the div to trigger the event when the height is changed. Please help. Thanks in advance.

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-16T22:35:22+0000

First, There is no such css-changes event out of the box, but you can create one by your own, as onchange is for :input elements only. not for css changes.

There are two ways to track css changes.

Examine the DOM element for css changes every x time(500 milliseconds in the example).
Trigger an event when you change the element css.
Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.

First way:

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

    setTimeout(checkForChanges, 500);
}

Second way:

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


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

If you control the css changes, the second option is a lot more elegant and efficient way of doing it.

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.

Categories

javascript - jquery - How to determine if a div changes its height or any css attribute?

javascript - jquery - How to determine if a div changes its height or any css attribute?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags