Jquery-如何确定一个 div 是否改变了它的高度或者任何 css 属性？

我想知道如何触发一个事件当一个 div 改变它的高度或任何 css 属性。

我有一个 id = mainContent的 div。我希望 jquery 在改变高度时自动触发一个事件。我做了这样的事:

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

我知道这是错的。

下面是我的全部代码(我粘贴了所有代码，因为我不知道为什么无法进入 jsfiddle) :

$(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());
});
});
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}


#separator {
border-right: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

我尝试根据 mainContent的高度调整 div id = separator的高度，只要 mainContent的高度发生变化。

PS: 在这种情况下，我知道我可以使用按钮事件来做到这一点，但我希望 div 在高度改变时触发事件。请帮帮我。先谢谢你。

174419 次浏览
小开
最佳答案

首先，没有这样的 css-change 事件，但是您可以自己创建一个，因为 onchange仅用于 :input元素。不是因为 CSS 的改变。

有两种方法可以跟踪 css 更改。

  1. 检查 DOM 元素是否每 x 次都有 css 更改(示例中为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 的更改，那么第二个选项将是一种更加优雅和高效的方法。

文件:

  • Bind : 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.
小开

另一个简单的例子。

对于这个示例，我们可以使用100x100DIV-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 块元素
  2. 添加简单的 JavaScript 代码:
    • JQuery 绑定
    • JQuery resizer 与触发器动作“ resize”-触发器是我的例子中最重要的事情
  3. 调整大小后，可以检查浏览器警报信息

仅此而已

小开

请不要使用其他答案中描述的技巧。他们要么不使用 css3动画大小的变化，浮动布局的变化或不来自 jQuery 的变化。您可以使用大小调整检测器，这是一种基于事件的方法，不会浪费您的 CPU 时间。

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

它包含一个可用于此目的的 ResizeSensor 类。

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

免责声明: 我写了这个库

小开

如果你不需要支持 < IE11，那么你应该使用 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 文档了解更多信息

小开

至于高度或任何其他尺寸参数，您可以使用 ResizeObserver接口。 首先，得到 HTML 元素:

const divElem = document.querySelector('#mainContent');

元素类型不限于 DIV，它可以是任何类型。 然后，创建 ResizeObserver 接口的一个实例:

let myObserver = new ResizeObserver(entries => {
console.log("Height changed. New height: "+$("#mainContent").height());
});

最后，调用 Observer ()方法，该方法启动指定的元素:

myObserver.observe(divElem);

每次调整元素的大小时，将触发 Observer ()方法。

请注意: ResizeObserver 接口支持 Internet Explorer。

其他有价值的答案如下: 如何检测 DIV 的尺寸变化？


提交答案