javascript - 如何仅在首页上应用此样式？

我有这个网站:

link

CODE JS:

$('.entry-content').css('height', 100+'vh');
$('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
$(window).on('resize',function(){

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

});

这些功能应仅在第一页上应用。
我可以访问不同的div样式以仅在首页上应用吗？

我尝试放置此代码，但不幸的是无法正常工作……适用于所有页面。

CODE CSS:

article>.entry-content{height:auto !important;}

您能帮我解决这个问题吗？

提前致谢!

编辑:

 if ( window.currentPage == "homepage" ) {

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
    $(window).on('resize',function(){

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

    });
 }

在document.ready代码中的代码仅在放入...调整大小功能后才起作用。

最佳答案

不好的办法

您可以检查仅在首页上添加的特定DOM元素长度

// #onlyhomepage Only exist DOM on homepage
if ( $("#onlyhomepage").length ) {

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
    $(window).on('resize',function(){

        $('.entry-content').css('height', 100+'vh');
        $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

    });

}

好办法，

只需在首页上添加一个全局JavaScript变量

HTML(首页HTML)

<script>
    window.currentpage = "homepage";
</script>

JavaScript(外部Js文件)

if ( window.currentPage == "homepage" ) {

    $('.entry-content').css('height', 100+'vh');
    $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);
    $(window).on('resize',function(){

        $('.entry-content').css('height', 100+'vh');
        $('.entry-content').css('height', $('.entry-content').outerHeight() - 50);

    });

}