Question

当用户根据屏幕大小加载页面时，我试图动态更改类标记的名称。这是代码：

<!DOCTYPE html>
<html>
<body onload="changeClass()">

<section class="example">
    <p>Hello</p>
</section>

<section class="example">
    <p>New section</p>
</section>

<script>
function changeClass() {
    var x = document.getElementsByClassName('example');
    var width = (window.innerHeight > 0) ? window.innerHeight : screen.Height;
    console.log(width);
    if(width <= 640) {
        while(x.length > 0) {
            x[1].className ='newClass'; 
        }
    } else {
        while(x.length > 0) {
            x[0].className = "example";
        }
    }
}
</script>
</body>
</html>

但是，页面被抛入无限循环并且无法加载数据。有没有一种简单的方法来设置基于屏幕大小命名的类？我可以使用＆＃34; if条件＆＃34;检查页面何时加载？我还加了JSFiddle。但我不知道这会有多大帮助。

Answer 1

正如评论中所提到的，媒体查询是实现您在此尝试的最佳方式。

也就是说，为了回答当前代码中存在的实际问题，您将进入无限循环，因为您正在使用while循环。数组的长度永远不会达到零，因此while循环永远不会退出。

考虑使用以下代码

if(width <= 640) {
    for(var i = 0; i < x.length; i++) {
        x[i].className ='newClass'; 
    }
}

显然，您需要更改两个while循环。

尽管如此，我会强烈建议你使用媒体查询，除非你有令人信服的理由不这样做。

如果想法只是根据屏幕尺寸更改样式，可以通过在样式表中添加以下内容来完成此操作

@media (max-width: 640px) {
    .example {
        ... styles to show on smaller screens ....
    }
}

Answer 2

我可以在您的代码中看到几个问题。首先是你获得屏幕宽度不正确的方式。

应该如下更正。

var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width;

第二件事是你根本不需要任何循环。只需遵循以下代码即可实现您的目标。

function changeClass() {
    var x = document.getElementsByClassName('example');
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width;
    console.log(width);
    if(x.length > 0) {
        if(width <= 640) {
            x[1].className ='newClass'; 
        } else {
            x[0].className = "example";
        }
    }
}

HTML根据屏幕大小更改类名称

2 个答案: