Question

当屏幕尺寸为＆gt; = 769px 时，我需要添加 .full-page 类，并在屏幕尺寸时删除相同的类<＆lt; = 768 即可。 div我需要要应用的类具有 #here 的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添加和删除类。

您可以看到示例here。通过拖动边框更改右下方矩形的宽度。

<强>代码：

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中没有方法添加|删除类，如果要更改元素的类，可以使用

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

OR

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

Answer 3

我认为如果你想在链接jQuery文件之后使用＆＃39; addClass＆＃39;，你需要使用jQuery，尝试

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

和

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

根据屏幕大小从特定div添加/删除类

3 个答案: