时间戳

首页 > 解决方案 > 如何根据屏幕大小删除元素

javascript - 如何根据屏幕大小删除元素

问题描述

我有一个 2 行 5 列的表，每列都有一个代表一天的类。我也有 js，如果浏览器的宽度/高度小于或等于 400，应该检测它是哪一天并删除所有其他类中的每个元素，但不是今天的类。问题是：它不起作用。如果可能的话，请用纯 javascript 而不是 jQuery 或其他东西回答。需要明确的是：没有课程被称为“今天”。

var w = window.innerWidth;
var h = window.innerHeight;
var d = new Date();
var n = d.getDay();
var days = [
    document.getElementsByClassName('sun'),
    document.getElementsByClassName('mon'),
    document.getElementsByClassName('tue'),
    document.getElementsByClassName('wed'),
    document.getElementsByClassName('thu')
];

if (w <= 400 || h <= 400) {
    console.log(n)
    if (n == 0) {
        //remove all elements except the elements of the class
        while (days[1].hasChildNodes()) {
            days[1].removeChild(days[1].firstChild);
        }
        while (days[2].hasChildNodes()) {
            days[2].removeChild(days[2].firstChild);
        }
        while (days[3].hasChildNodes()) {
            days[3].removeChild(days[3].firstChild);
        }
        while (days[4].hasChildNodes()) {
            days[4].removeChild(days[4].firstChild);
        }
    };
    //same for different days...
}
table,
th,
td {
    border: 1px solid black;
    border-collapse: collapse;
}
<table>
    <tr>
        <th>title text 1st row</th>
        <td class="sun">sunday class text</td>
        <td class="mon">monday class text</td>
        <td class="tue">tuesday class text</td>
        <td class="wed">wednesday class text</td>
        <td class="thu">thursday class text</td>
    </tr>
    <tr>
        <th>title text 2nd row</th>
        <td class="sun">sunday class text</td>
        <td class="mon">monday class text</td>
        <td class="tue">tuesday class text</td>
        <td class="wed">wednesday class text</td>
        <td class="thu">thursday class text</td>
    </tr>
</table>

标签： javascripthtml

解决方案

好的。你可以用 CSS 做大部分你想做的事情：

@media screen and (max-width:400px) {
    .mon,
    .tue,
     .wed,
     .thu { 
       display:none;
    }
    .today { display:block }

}

对于您的特定问题，您需要计算出今天是哪一天，并为与那一天匹配的元素添加一个类。然后在您的媒体查询中定位该元素。

像这样的东西。

var d = new Date();
var weekday = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

var elements = document.getElementsByClassName(weekday[d.getDay()]);

Array.prototype.forEach.call(elements, function(element) {
    elemenet.className = "today"; 
});

推荐阅读