根据视口高度向 body 元素添加 class

Question

我正在尝试使用 jQuery.

向正文元素添加两个 classes

第一个将获取 URL 并将其添加到 body 元素。我的代码将 class 截断为前 5 个字符。但是，我希望它是整个 url（不包括扩展名），这样一个名为 new_page.html 的文件将添加 class="new_page" 并且 this-is-another-new_page.php 将添加 class="this-is-another-new_page".

var newClass = window.location.href;
newClass = newClass.substring(newClass.lastIndexOf('/')+1, 5);
$('body').addClass(newClass);

我想添加的第二个 class 是对视口高度的检测，它会根据视口高度添加 short 或 tall 的 class .在这种情况下，我想添加一个 class 来检测视口高度是否小于 768 并添加 class short 或 greater than or equal to 768 并添加一个class 个 tall。

如有任何建议，我们将不胜感激。

Answer 1

您可以使用 $(window).height()

检查身高

$(function() {
    //taken from @Vohuman's comment
    var newClass = window.location.pathname.split('.').shift().slice(1);
    $('body').addClass(newClass);

    if($(window).height() < 768) {
       $("body").addClass("short");
    } else {
       $("body").addClass("tall");
    }
 })

根据视口高度向 body 元素添加 class

Add class to body element based on viewport height

javascript

css

jquery

viewport