javascript - 显示: none & setAttribute() not working

Question

只需更改 .css 中 .p-header 的属性，显示:“无”。到显示:' block '使用JS。

我在执行前检查了 chrome 工具，display:'none'未显示在 html 中。

但是它所在的标签没有显示，就像 display,'none' 的用途一样。

运行脚本后，display: 'block' 通过 html 中的 .js 动态显示。但屏幕上什么也没有出现

html

<header>
        <h1>Take the Dog Quiz</h1>
        <p class="p-header">You scored: <span class="p-span"></span></p>
    </header>
    <main>
        <form action="#">
            <div class="q1-div">
                <h5>Can dogs run?</h5><br>
                <label for="q1" id="q1">Yes.</label><br>
                <input type="radio" name="q1" id="q1" value="a" checked><br>
                <label for="q1">No.</label><br>
                <input type="radio" name="q1" id="q1" value="b">
            </div>

            <div class="q2-div">
                <h5>Are dogs invisible?</h5><br>
                <label for="q2">Yes.</label><br>
                <input type="radio" name="q2" id="q2" value="a" checked><br>
                <label for="q2">No.</label><br>
                <input type="radio" name="q2" id="q2" value="b">
            </div>

            <div class="q3-div">
                <h5>Does a dog have 4 legs?</h5><br>
                <label for="q3">Yes.</label><br>
                <input type="radio" name="q3" id="q3" value="a" checked><br>
                <label for="q3">No.</label><br>
                <input type="radio" name="q3" id="q3" value="b">
            </div>

            <div class="q4-div">
                <h5>Can a dog fly?</h5>
                <label for="q4">Yes.</label><br>
                <input type="radio" name="q4" id="q4" value="a" checked><br>
                <label for="q4">No.</label><br>
                <input type="radio" name="q4" id="q4" value="b">
            </div>

            <input type="submit" value="Submit">
        </form>

    </main>


    <script src="index.js"></script>

CSS

.p-header{
    display: none;
    color: #111;
    font-size: 1em;
}

```js``

const answers = ['a','b','a','b'];
const form = document.querySelector('form');
const p = document.querySelector('.p-span');
const phead = document.querySelector('.p-header');

//add event listener to form
form.addEventListener('submit', e =>{
    e.preventDefault();
    //remove display: none from css script to block
    phead.setAttribute('display', 'block');
    scrollTo(0,0);

    let score = 0;
    //collect user answers
    const attemptedAnswers = [form.q1.value, form.q2.value,form.q3.value,form.q4.value];

    //loop and compare user answers to correct "answers".
    //increase score total per correct answer
    attemptedAnswers.forEach((answer, index) =>{
        if(answer === answers[index]){
            score += 25;
        }
    });

    //display animation of score with setInterval then stop interval when counter === score
    let counter = 0;
    const scoreboard = setInterval(()=>{

        p.textContent = `${counter}%`;

        if(counter === score){
            clearInterval(scoreboard);
        }
        console.log(counter);
        counter ++;
    }, 10);


});

Answer 1

“display”不是 html 元素的属性。
“style”是一个属性。

这两个都可以 -

phead.style.display = 'block';

phead.style.setProperty('display', 'block');

解释-
显示是样式的一个属性。 style是html元素的一个属性。