js querySelector 判断是否显示

JavaScript中的querySelector方法可以根据指定的CSS选择器返回文档中与该选择器匹配的第一个元素，而querySelectorAll方法则返回文档中所有与该选择器匹配的元素。

要判断一个元素是否显示，可以使用元素的style属性来获取其样式。通过获取元素的display属性，可以判断该元素是否显示。如果该属性的值为"none"，则说明该元素不显示。

示例代码如下：

var element = document.querySelector("#myElement"); // 获取id为myElement的元素
if (window.getComputedStyle(element).display === "none") { // 判断该元素是否显示
    console.log("该元素不显示");
} else {
    console.log("该元素显示");
}

相关问题

js缩小窗口时显示导航栏 已知let navbar = document.querySelector('.navbar')

可以使用window对象的resize事件来监听浏览器窗口大小的变化，然后根据窗口大小的变化来判断是否显示导航栏。示例代码如下：

function handleResize() {
  if (window.innerWidth < 768) {
    navbar.style.display = 'block';
  } else {
    navbar.style.display = 'none';
  }
}

window.addEventListener('resize', handleResize);

上述代码中，我们定义了一个handleResize函数用来处理窗口大小变化事件。当窗口宽度小于768像素时，显示导航栏；否则隐藏导航栏。然后使用window.addEventListener方法来添加resize事件监听器，每当浏览器窗口大小发生变化时，就会调用handleResize函数来处理。

js弹窗，自动判断显示上下位置！！

可以使用以下代码实现弹窗的自动判断显示上下位置：

HTML部分：

<button onclick="showPopup()">打开弹窗</button>
<div id="popup" style="display: none;">这是一个弹窗</div>

JS部分：

function showPopup() {
  var btn = document.querySelector('button');
  var popup = document.getElementById('popup');
  var btnRect = btn.getBoundingClientRect();
  var popupRect = popup.getBoundingClientRect();
  var top = btnRect.top + window.pageYOffset;
  var bottom = top + btnRect.height;
  var isBelow = (bottom + popupRect.height) <= window.innerHeight;
  if (isBelow) {
    popup.style.top = bottom + 'px';
  } else {
    popup.style.bottom = (window.innerHeight - top) + 'px';
  }
  popup.style.left = btnRect.left + 'px';
  popup.style.display = 'block';
}

上述代码使用了 `getBoundingClientRect()` 方法获取按钮和弹窗的位置和大小，然后根据按钮在视口中的位置来判断弹窗应该在按钮上方还是下方显示。如果弹窗在按钮下方，那么就设置 `top` 属性；如果在按钮上方，就设置 `bottom` 属性。最后把弹窗显示出来即可。