如果元素大小小于X,则

时间:2018-10-11 12:12:04

标签: jquery css height

如果高度小于700px,我想更改元素的属性。所以我尝试了这段代码:

if ($('.content').height() < 700) {
    $( "#footer" ).css( "position", "absolute" ); 
};

不幸的是,它不起作用。我在哪里犯错? 谢谢。

4 个答案:

答案 0 :(得分:1)

尝试:)

outerHeight-http://api.jquery.com/outerheight/

$(document).ready(function(){    
        var contentHeight = $('.content').outerHeight();    
        if ( contentHeight < 700) {    
            $( "#footer" ).css( "position", "absolute" );    
        };
    });

答案 1 :(得分:0)

尝试使用:.style.height

内部高度:document.getElementById("id").clientHeight

外部高度:document.getElementById("id").offsetHeight

答案 2 :(得分:0)

代码正确。您只需要检查条件是否为真即可。您可以使用console.log(“ it works”)或alert(“ it is true”)进行检查。

我相信您想在某些事件后更改属性。

$("btn").on("click", function(){

   //to check if event is fired or not
   alert("clicked");
   //if you want to check your condition in console
   console.log($('.content').height() < 700)

  if ($('.content').height() < 700) {
     $( "#footer" ).css( "position", "absolute" );
  }

});

答案 3 :(得分:0)

当我尝试上面提供的示例时,它可以正常工作。

我需要更多有关您要实现的目标的详细信息。

据我了解,如果我没看错,您想根据页面加载和页面调整大小时的内容高度来添加和删除绝对位置。 如果是这种情况,请尝试以下代码。

function handleFooter () {
  if ($('.content').height() < 250) {
    $( "#footer" ).css( "position", "absolute" );
  } else {
    $( "#footer" ).css( "position", "static" );
  }
}

handleFooter();

$(window).resize(function() {
  handleFooter();
});

如果这不能解决您的问题,请提供更多信息或其他代码段,以便我更好地帮助您