如何通过JQuery修改CSS

Question

I want to get the screen and modify the css styles of my box. Thats my code

if ($('.content').height() > $(window).height() - 100) {
    $('.content').css("max-height", $(window).height() - 100);
}

Now I want to set the max height of the .content box lower than the height of my screen size. If my content box is higher than my screen size, the css should set de max height and change the overflow to auto.

Answer 1

Looks like you could do this -

var content = $(".content");
// Cache the height in variables, no need to access DOM again and again
var screenHeight = $(window).height();
var contentHeight = content.height();
if(contentHeight>windowHeight-100){
  content.css("overflow","auto"); // Note - this will change it for the current instance of the page and NOT in your CSS file
  content.css("max-height",(windowHeight-100) + "px");      
}

You can also combine the above two css properties in one single statement (written separately for explanation) -

content.css({"max-height":(windowHeight-100)+"px","overflow":"auto"});

Answer 2

I would suggest you to use the max height value along with px .

if ( $('.content').height() > ($(window).height() - 100) ) {
    $('.content').css("max-height", ( $(window).height() - 100 ) + "px" )
                 .css("overflow","auto");
}

This would resolve you issue.

Answer 3

Do this -

var maxHeight = $(window).height() - 100;
if ($('.content').height() > maxHeight) {
    $('.content').css({"max-height": maxHeight, overflow: "auto"});
}

Answer 4

使用单位“px”

 $('.content').css("max-height", ($(window).height() - 100)+"px");