我试图在用户根据屏幕大小加载页面时动态更改类标记的名称。这是代码：
<!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>
但是，页面将陷入无限循环，无法加载数据。有没有一种简单的方法来设置基于屏幕大小的命名类？页面加载时可以使用“如果有条件”检查吗？我还包括了JSFiddle。我不知道这有多大帮助。
最佳答案
正如评论中提到的那样，媒体查询是实现您要在此处执行的操作的最佳方法。
就是说，要回答代码中当前存在的实际问题，您会陷入无限循环，因为您正在使用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 ....
}
}
关于javascript - 基于屏幕大小的HTML更改类名称，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42662530/