gpt4 book ai didi

javascript - HTML 根据屏幕大小更改类名

转载 作者:行者123 更新时间:2023-11-30 15:28:04 24 4
gpt4 key购买 nike

我试图在用户根据屏幕尺寸加载页面时动态更改类标签的名称。这是代码:

<!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>

但是,页面陷入死循环,无法加载数据。有没有一种简单的方法来设置根据屏幕大小命名的类?我可以在页面加载时使用“if conditional”检查吗?我还包括了一个 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com