Vanila js 和 css-解网

问：

如何使按钮在屏幕上渲染时消失

function findRequireMessage() {
  const messages = document.querySelectorAll('.message');
  const requireMessage = Array.from(messages).find(message => message.className.includes('requestedReply'));
  if (requireMessage) { 
    requireMessage.scrollIntoView({ block: 'end', behavior: 'smooth' });
    return true;
  } else { 
    alert('No require message found.');
    return false;
  }
}

window.addEventListener("DOMContentLoaded", (event) => {
  const findRequireButton = document.getElementById('find-require-button');
  findRequireButton.style.display = 'none'; // set the button to display none initially
  if (findRequireMessage()) {
    findRequireButton.style.display = 'block';
  }
});

我想要这个显示：“incline-block，第一次加载时检查聊天中是否有requireMessage，如果它是真的，则显示按钮，否则不在聊天中显示任何内容

javascript html css 事件 dom-events

评论

0赞 Sfili_81 4/18/2023

请阅读如何提问和最小可重复的例子

0赞 tacoshy 4/18/2023

不要使用 . 重新运行一个 Nodelist，它是一个类似数组的对象，可以像数组一样迭代。此外，您可以首先使用仅选择所需的元素。Array.from(NodeList)querySelectorAllquerySelectorAll('.message[class^="requestedReply"]')

0赞 Elius Gachango 4/18/2023

我们添加这个 querySelectorAll（'.message[class^=“requestedReply”]'）不起作用

0赞 Elius Gachango 4/18/2023

我们添加这个 querySelectorAll（'.message[class^=“requestedReply”]'）不起作用

0赞 berriz44 4/19/2023

你能把你的 HTML、CSS 和 JS 放在小提琴里吗？

答：

0赞 berriz44 4/18/2023 #1

有一些方法可以做到这一点，例如：

添加到 HTML 标记defer<script>

<script src="path/to/js" defer></script>

使按钮从一开始就不可见

<button id="find-require-button" style="display:none;"></button>

在 DOMContentLoaded 之后稍等片刻（这不是最佳做法，因为用户可能会看到按钮消失）

window.addEventListener("DOMContentLoaded", (event) => {
    setTimeout(()=>{}, 50 /* 50 milliseconds after DOMContentLoaded; this can be changed to any value */)
    // code
})

评论

0赞 Elius Gachango 4/19/2023

我得到一个空的节点列表

0赞 Elius Gachango 4/19/2023

NodeList []length： 0[[Prototype]]： NodeList requireMesage undefined

0赞 berriz44 4/19/2023

@EliusGachango 而不是在 findRequireMessage 中使用，而是使用message.classNamemessage.getAttribute("class")

上一个：单击时类不会更改

下一个：如何从 MutationObserver 获取偶数源