用js更改css類

我想在窗口寬度小於768px時添加和刪除css類。我用JavaScript來做到這一點：用js更改css類

$(window).ready(function() { 
var $width = $(window).width(); 
    if ($width <= 768){ 
    $('header').addClass('hide'); 
    $('#menu-switch').removeClass('hide'); 
}; 
});

的問題是，我已經刷新頁面，以便它的作品。有沒有辦法添加和刪除類，而無需刷新頁面？

來源

2015-05-26 Simon M.

是的，它被稱爲'resize'事件！ – adeneo

是使用'resize'事件。 –

使用resize事件？ – j08691

jQuery的方法是

$(window).on('resize', function() { 
    if ($(window).width() <= 768){ 
     $('header').addClass('hide'); 
     $('#menu-switch').removeClass('hide'); 
    } 
    else { 
     $('#menu-switch').addClass('hide'); 
     $('header').removeClass('hide'); 
    } 
});

，但因爲有一個更高性能的方式通過所謂的媒體查詢做到這一點在CSS，你不應該用這個。你爲你展示了用例的解決方案是這樣的：

@media screen and (max-width: 768px) { 
    header { 
     display: none; 
    } 
    #menu-switch { 
     display: block; 
    } 
} 

@media screen and (min-width: 769px) { 
    header { 
     display: block; 
    } 
    #menu-switch { 
     display: none; 
    } 
}

來源

2015-05-26 15:33:50 connexo

的JavaScript：

window.onresize = function(event) { 
var $width = $(window).width(); 
    if ($width <= 768){ 
    $('header').addClass('hide'); 
    $('#menu-switch').removeClass('hide'); 
}; 
};

來源

2015-05-26 15:27:38 lmgonzalves

爲什麼你會在其他地方使用jQuery *除了*將處理程序綁定到onresize事件時？這可以說是使用jQuery的最佳*機會，因爲它避免了覆蓋現有的處理程序（或稍後覆蓋此處理程序）。 – JJJ

因爲jQuery只是包裝標準調整大小的DOM事件。 – lmgonzalves

...我剛剛提到的附加好處。 – JJJ

可以用CSS來實現更流暢的渲染作爲窗口調整監聽器是低性能比較計算機的用戶相當沉重。

嘗試somethink這樣的：

@media screen and (max-width: 767px) { 
header, #menu-switch { 
    display: none; 
} 
}

來源

2015-05-26 15:29:49

jQuery(window).on('resize', function(){ ....

我們不得不使用相同的想法，以前固定在調整大小的CSS。我們也增加了一些延遲，並在文檔準備就緒時自行觸發調整大小事件。

setTimeout(function(){ 
    jQuery(window).trigger('resize'); 
}, 200);

來源

2015-05-26 15:30:02

嘗試：

$(window).bind('load resize', function(){ 
 
var $width = $(window).width(); 
 
    if ($width <= 768){ 
 
    $('header').addClass('hide'); 
 
    $('#menu-switch').removeClass('hide'); 
 
}; 
 
});

來源

2015-05-26 15:30:16 ralu

請注意，'bind（events，callback（））'的使用不鼓勵使用'on（events，callback（））'。 – connexo

你應該使用：

jQuery(window).resize(function(){ 
    var $width = $(window).width(); 
    if ($width <= 768){ 
     $('header').addClass('hide'); 
     $('#menu-switch').removeClass('hide'); 
    }; 
});

這樣，它可以捕捉瀏覽器的事件，調整大小，每次用戶改變其瀏覽器的可變寬度將獲得新的值。

來源

2015-05-26 15:31:11

你需要檢查時，頁面加載和當調整或滾動：

var changeMe = function(){ 
    var $width = $(document).width(); 
    if ($width <= 768){ 
     $('header').addClass('hide'); 
     $('#menu-switch').removeClass('hide'); 
    }; 
}; 
/* On ready */ 
$(document).ready(function(){changeMe();}); 
/* On resize */ 
$(window).resize(function(){changeMe();}); 
/* On scroll */ 
$(document).scroll(function(){changeMe();});

這項工作100％。

但是你可以使用CSS3這個問題：

@media screen and (max-width: 768px) { 
    header { 
     display: none; 
    } 
    #menu-switch { 
     display: block; 
    } 
}

就包括CSS switcers後，您的主要風格，改變只有你所需要的。

來源

2015-05-26 15:37:44

回答

相關問題