如何通过JQuery修改CSS

Question

我想获得屏幕并修改我的盒子的CSS样式。 那是我的代码

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

现在我想将.content框的最大高度设置为低于屏幕大小的高度。 如果我的内容框高于我的屏幕大小，则css应设置de max height并将溢出更改为auto。

Answer 1

看起来你可以做到这一点 -

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");      
}

您还可以将上述两个css属性合并到一个语句中（单独编写以供说明） -

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

Answer 2

我建议你使用最大高度值和px 。

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

这将解决您的问题。

Answer 3

做这个 -

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");