如何通過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");