根據屏幕尺寸從特定的div添加/刪除類

Question

當屏幕尺寸> = 769px時，我需要添加.full-page類；當屏幕尺寸<= 768時，我需要刪除同一類。 我需要將其應用於該類的div的ID為## ， 這里我嘗試了很多事情，這就是我離開的地方...

<script>

    var windowSize = window.innerWidth;

    if (windowSize >= 769) {
        console.log('Greater than 768');
        document.getElementById('here').addClass = 'full-page';}

    else (windowSize <= 768) {
        console.log('Less than 768');
        document.getElementById('here').removeClass = 'full-page';}

</script>

有人給小費嗎？ 提前致謝！

Answer 1

您可以使用window#matchMedia來檢測寬度變化，並查看其是否符合特定條件。 使用classList添加和刪​​除類。

您可以在此處查看示例。 通過拖動邊框來更改右下角矩形的寬度。

---

碼：

var classList = document.getElementById('here').classList;

var minWidth769 = window.matchMedia("(min-width: 769px)");

function match() {
    minWidth769.matches ? classList.add('full-page') : classList.remove('full-page');
}

minWidth769.addListener(match);

match();

Answer 2

JavaScript中沒有方法add | remove Class ，如果要更改元素的類，則可以使用

document.getElementById('here').className = 'full-page'

要么

document.getElementById('here').setAttribute('class', 'full-page')

Answer 3

我想如果要使用'addClass'，則需要使用jQuery，在鏈接jQuery文件后，請嘗試

$("#here").addClass("full-page");

和

$("#here").removeClass ("full-page");