主页 / 问题 / 1343904
Accepted
kiskiskit
Asked:2022-03-31 03:40:47 +0800 CST2022-03-31 03:40:47 +0800 CST

为什么不通过 querySelectorAll 应用块样式？

  • 772

您能否解释一下为什么在 querySelectorAll 应用程序期间没有为块设置样式？但是如果您设置了一个 querySelector，那么所需的样式将应用于所需的块。

逻辑是这样的：通过单击按钮，应该会出现一个块。默认情况下，块具有显示：无，通过单击按钮应更改为显示：块

let showMsg = document.querySelectorAll('.msg-1 .msg-2 .msg-3');


function viewMsg() {
    showMsg.style.display = 'block';
}
.msg-1 {
    display: none;
}

.msg-2 {
    display: none;
}

.msg-3 {
    display: none;
}
<div class="chat-ui">
    <div class="chat-items">
        <div class="msg">
            <p>первый этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-1">
            <p>второй этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-2">
            <p>конец</p>
            <button value="Click" onmousedown="viewMsg()">отправить</button>
        </div>
        <div class="msg msg-3">
            <p>полный конец</p>
        </div>
    </div>

</div>

javascript

2 个回答

  1. Best Answer

    Document.querySelectorAll返回NodeList（数组），而Document.querySelector返回Element（一个元素）。

    要将样式应用于 中的所有元素NodeList，您需要循环并为每个元素分配一个属性：

    for (let i = 0; i < showMsg.length; i++) {
   let msg = showMsg[i];
   msg.style.display = 'block';
}
    • 4

  2. 你有两个错误。首先，您拼错了选择器： .msg-1 .msg-2 .msg-3。在这种形式中，它不会找到任何东西，因为它会在里面.msg-3搜索。.msg-2.msg-1

    其次，它querySelectorAll返回一个元素的集合。您可以单独为每个元素应用样式

    let showMsg = document.querySelectorAll('.msg-1, .msg-2, .msg-3');


function viewMsg() {
    showMsg.forEach(el => el.style.display = 'block');
}
    .msg-1 {
    display: none;
}

.msg-2 {
    display: none;
}

.msg-3 {
    display: none;
}
    <div class="chat-ui">
    <div class="chat-items">
        <div class="msg">
            <p>первый этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-1">
            <p>второй этап</p>
            <button value="Click" onmousedown="viewMsg()">далее</button>
        </div>
        <div class="msg msg-2">
            <p>конец</p>
            <button value="Click" onmousedown="viewMsg()">отправить</button>
        </div>
        <div class="msg msg-3">
            <p>полный конец</p>
        </div>
    </div>

</div>

    • 3

相关问题