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

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

javascript jquery css

Javascript jquery-如何确定一个div是否改变了它的高度或任何css属性？,javascript,jquery,css,Javascript,Jquery,Css,我想知道当一个div改变它的高度或任何css属性时如何触发一个事件我有一个id为mainContent的div。我希望jquery在更改其高度时自动触发事件。我是这样做的： $("#mainContent").change('height', function() { $("#separator").css('height', $("#mainContent").height()); }); 我知道这是不对的以下是我的全部代码（我粘贴了所有代码，因为我不知道为什么不能进入JSFID

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

我有一个id为mainContent的div。我希望jquery在更改其高度时自动触发事件。我是这样做的：

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

我知道这是不对的

以下是我的全部代码（我粘贴了所有代码，因为我不知道为什么不能进入JSFIDLE）：


html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#分离器{
右边框：1px纯黑；
}
$（文档）.ready（函数（）{
$（“#分隔符”）.css（'height'，$（'body”）.height（）；
});
$（函数（）{
$（“#btnSample1”）。单击（函数（）{
$（“#mainContent”）.css（'height'，'400px'）；
$（“#mainContent”）.css（'width'，'600px'）；
$（“#mainContent”）.css（'background-color'，'#f0'）；
});
$（“#btnSample2”）。单击（函数（）{
$（“#mainContent”）.css（'height'，'1600px'）；
$（“#mainContent”）.css（'width'，'700px'）；
$（“#mainContent”）.css（'background-color'，'#f0'）；
});
$（“#主要内容”）.change（'height'，function（））{
$（“#分隔符”）.css（'height'，$（“#mainContent”）.height（）；
});
});

每当

mainContent

的高度发生变化时，我试图根据

mainContent

的高度来调整div id=

分隔符的高度
PS：在这种情况下，我知道我可以使用按钮事件来执行此操作，但我希望div在高度更改时触发事件。请帮忙。提前感谢。
首先，没有现成的css更改事件，但是您可以自己创建一个，因为onchange
用于：仅输入元素。不适用于css更改
有两种方法可以跟踪css更改
每x次（示例中为500毫秒）检查DOM元素的css更改
更改元素css时触发事件

使用DOMATRTMODIFED
突变事件。但是它是，所以我就跳过它
第一种方式：
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'); //<====
    ...
});    

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

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

第二种方式：
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'); //<====
    ...
});    

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

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

$（'mainContent'）.bind（'heightChange'，function（））{
警报（“xxx”）；
});
$（“#btnSample1”）。单击（函数（）{
$（“#mainContent”）.css（'height'，'400px'）；
$（“#mainContent”）.trigger（'heightChange'）；//另一个简单的例子
对于此示例，我们可以使用100x100DIV-box:
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'); //<====
    ...
});    

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

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


//这里有红色的盒子内容。。。

和小jQuery技巧：
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'); //<====
    ...
});    

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

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


jQuery（“#box”）.bind（“resize”，function（））{
警报（“盒子的大小从100x100调整到200x200”）；
});
jQuery（“#框”）.width（200）.height（200）.trigger（“resize”）；

步骤：
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'); //<====
    ...
});    

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

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

我们创建了用于调整运算符大小的DIV块元素
使用以下命令添加简单的JavaScript代码：

jQuery绑定
带有触发器操作“resize”的jQuery resizer——在我的示例中，触发器是最重要的

调整大小后，您可以查看浏览器警报信息
仅此而已。；-
请不要使用此处其他答案中描述的技术。这些技术可能无法处理css3动画大小更改、浮动布局更改或不是来自jQuery land的更改。您可以使用基于事件的调整大小检测器，这不会浪费您的CPU时间

它包含一个可用于此目的的ResizeSensor类
new ResizeSensor(jQuery('#mainContent'), function(){ 
    console.log('main content dimension changed');
});

免责声明：我编写此库是为了将来的缘故，我将发布此库。如果您不需要支持
这里有一个链接到
使用简单，效果显著
    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();

查看以了解更多信息
您想实现什么？我想根据mainContent div的高度自动调整分隔符div的高度。好的，我将编辑我的问题。我认为您应该使用CSS。您能发布您的问题的演示吗（现场演示会很好）？@Blender我想在jsfiddle.net中发布它，但我今天无法进入该网站。你是在问div的高度何时被另一段代码更改，还是由于用户调整浏览器的大小而更改？（或两者兼有？）if（$element.css（'height'）='bar'）中的bar是什么？@NinjaBoy。我很高兴能帮上忙，因为它包含了另一个选项。heightChange是默认的jquery函数吗？还是更简单的$（'mainContent'）。高度（400）。触发器（'resize'））
任何需要定期检查的解决方案都很可能是一个不太优雅的性能消耗黑客，而不是事件驱动的解决方案。而且……对不起，我的英语很差……我没有足够的时间上英语学校。：-/您自己触发调整事件大小？我想问题是在用户生成事件时处理事件（增加/减少浏览器窗口大小）-不是你。效果很好！我见过的最佳解决方案-不完美，因为在短时间内发生多个调整大小触发器时（如使用调整大小的文本区域时），它似乎错过了一些事件，但仍然是一个有效的解决方案。gdoron的回答只提出了两个选项，一个是手动点击，另一个是使用计时器，这两个都有点糟糕。我发现这个插件是一个更好的解决方案，因为它非常好而且无缝，因为我们不需要手动捕获成功事件的所有动态，这可能会导致高度增加。这是一个很好的解决方案解决方案，但是，它是一个相当大的文件。您必须在这里选择CPU和页面重量。对我来说，运行循环函数来破坏要查看的DOM元素仍然是一个更好的选择。@Gfra54，“大文件”真是个笑话。ResizeSensor.js只有144行代码。；）不适合我。我错过了什么吗？我包括了两个js文件。添加了对构造函数的调用，例如，将mainContent更改为我的div的id，我确定它的高度已更改，但从未调用回调函数。控制台上没有异常。（he