javascript - 如何根据屏幕尺寸删除元素

Question

我有一个 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>

Answer 1

好的。您可以使用 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"; 
});