选择应用程序各个页面的元素

Selecting elements of individual pages of an app

本文关键字：元素 应用程序 选择      更新时间：2023-09-26

我正试图从我的web应用程序页面（或我正在开发的任何人的页面）中删除两个元素。这是出于响应性的原因，这些元素在移动设备上看起来很棒，但在台式机上却不太好。所以，我想通过url来定位页面，然后获取元素并隐藏它们。

我使用的是node.js，但我有点笨。这是我用React或Vue或类似的东西可以实现的吗。我尝试使用jQuery，但没有成功。

这是html:

<body>
  <div>
    <section id="dot1">
      <h6>Text Here</h6>
    </section>
      <section id="dot2">
    <h6>Text Here</h6>
    </section>
    <section id="studiesWp"><img src="/images/ms.png">
      <h1>Text Here</h1>
      <p>Text Here</p><a href="url/">Text Here</p>
    </section>
  </div>
</body>

所以，我想隐藏两个元素：#dot1&dot2.剩下的可以留下来。

下面是我尝试过的一个jQuery函数：

$(window).load(function() {
  // Check media queries
  if($(window).width() >= 769) {
    // Get pathname of page
    var page = window.location.pathname;
    // If pathname matches any of these
    if(page = 'profilePage','projectsPage','contact'){
      // Remove two elements
      $('#dot1').css('display','none');
      $('#dot2').css('display','none');
    }
    else{
      $('#dot1').css('display','block');
      $('#dot2').css('display','block');
    }
  }
});

这最好与CSS3配合使用，CSS3具有媒体查询，只有当正在查看的视口具有某些属性时，才能应用样式。

仅桌面css

所以，如果我们想创建一个只在手机上可见的元素，并且我们的css只在桌面上，我们可能会创建这样的东西：

/* This example will not work correctly, look below for the full code! */
.phone-only {
    display: none;
}

媒体查询

为了使该样式仅适用于较大的屏幕，我们将使用@media查询。我们需要仅将样式应用于智能手机或屏幕宽度小于769px的设备。在CSS中，我们将其写为min-width: 769px，然后用这样的媒体查询包装它：@media (min-width: 769px)。

当我们在@media查询中包装之前创建的样式时，我们得到了一个css规则，该规则在手机上隐藏了一个元素。

@media (min-width: 769px) {
   .phone-only {
       display: none;
   }
}

并使用CCD_ 6。

相关文章：