基于屏幕大小的HTML更改类名称
[英]HTML Change Class Name Based on Screen Size
问题描述
I am trying to change the name of a class tag dynamically when a user loads the page based off of the screen size. 
我试图在用户根据屏幕大小加载页面时动态更改类标记的名称。 Here is the code: 这是代码：
<!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>
However, the page is thrown into an infinite loop and cannot load the data. 但是，页面将陷入无限循环，无法加载数据。 Is there an easy way to set the class named based on the size of the screen? 有没有一种简单的方法来设置基于屏幕尺寸的类？ Can I use an "if conditional" check when the page loads? 页面加载时可以使用“如果有条件”检查吗？ I have also included a JSFiddle . 我还包括一个JSFiddle 。 I don't know how much that will help however. 我不知道这有多大帮助。
2 个解决方案
解决方案1
2 已采纳 2017-03-08 03:44:11
As mentioned in the comments, media queries are the best way to achieve what you're trying to do here. 正如评论中提到的那样，媒体查询是实现您要在此处执行的操作的最佳方法。
That said, to answer the actual question as it currently stands with your code, you are getting into an infinite loop because you are using a while loop. 也就是说，要回答代码中当前存在的实际问题，您将进入无限循环，因为您正在使用while循环。 The length of the array will never reach zero, so your while loop will never exit. 数组的长度永远不会达到零，因此while循环永远不会退出。
Consider using the following code 考虑使用以下代码
if(width <= 640) {
for(var i = 0; i < x.length; i++) {
x[i].className ='newClass';
}
}
Obviously you would need to change both while loops. 显然，您需要同时更改两个while循环。
All that said though, I would strongly recommend you use media queries for this unless you have a compelling reason not to. 尽管如此，我强烈建议您对此使用媒体查询，除非您有令人信服的理由不这样做。
If the idea is just to change styles based on screen size, you could accomplish this with the following addition to your stylesheet 如果您的想法只是根据屏幕大小更改样式，则可以在样式表中添加以下内容来完成此操作
@media (max-width: 640px) {
.example {
... styles to show on smaller screens ....
}
}
解决方案2
0 2017-03-08 03:59:32
There are couple of problems that I can see in your code. 我可以在您的代码中看到几个问题。 The first thing is the way you are getting the screen width is incorrect. 第一件事是您获取屏幕宽度的方法不正确。
it should be corrected as below. 应按以下方式更正。
var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width;
And the second thing is you don't need any loop at all. 第二件事是您根本不需要任何循环。 Just following code will be more than enough to achieve what you are looking for. 只需遵循以下代码就可以满足您的需求。
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";
}
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.