使用jquery更改div高度时显示图像答案

【问题标题】：show image when div height is change using jquery使用jquery更改div高度时显示图像
【发布时间】：2015-08-07 12:46:52
【问题描述】：

我在右栏中有一个图像，在左栏中有一个div。现在我想隐藏图像，它应该只在div 高度达到 650px 时显示。

我做了一些谷歌搜索，发现可以在 jquery 中使用if elsestatement 来实现。但是没有找到正确的突破口。

请提出建议。

【问题讨论】：

css 中的媒体查询怎么样？它比首先使用 javaScript 更好，
你是对的，但这与屏幕高度无关，并且网站没有响应。我不是在看响应措施，我只想在 div 高度增加时显示图像。在那之前它应该保持隐藏状态。
首先是什么改变了 div 的高度？

标签： jquery html height show-hide

【解决方案1】：

你可以在你的 css 文件中使用媒体查询，而不需要 jquery

@media(max-height:650px){
 #img-id{
  display:none;
 }
}

但是，正如您所说，它是一个 div 元素，您可以使用 jquery

如本问题所述 jquery resize listener on a div

正如 poelinca 提供的线程所暗示的，有一些不错的插件可用于此功能。

如果您不喜欢插件的想法，另一个简单的解决方案是在内容被修改时简单地触发 div 上的“resize”事件。然后，您可以使用优雅的观察者模式按预期使用 resize() 对其进行监视。

function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
   // all your magic resize mojo goes here
});

所以我会把它修改成

    function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
if( $('divLeft').height() >= 650){ 
    $("#img-id").hide();
  }
else {
$("#img-id").show();
}

});

【讨论】：

【解决方案2】：

您可以像这样使用.toggle() 做一些事情：

$('img').toggle(function(){
     return $('divLeft').height() >= 650;
});

【讨论】：

【解决方案3】：

如果你使用媒体查询，你可以这样做......

@media(min-height:650px){
 #image-id{
  visibility: visible
 }
}

在媒体查询之外或在@media(min-height:650px) 行内，给

#image-id{
  visibility:hidden
 }

希望对您有所帮助....

【讨论】：