为创建的元素设置属性

Question

我已经有 3 个段落，需要使用 JavaScript 创建第 4 个段落创建成功。

const new_h2 = document.createElement('h2')

并为 h2 分配一个 ID

new_h2.setAttribute('id', 'heading4');

现在我得到了带有 ID 的 h2

const heading4 = document.getElementById('heading4')

当我尝试在 If 语句中使用它时出现问题

    window.addEventListener('scroll', function(){
        console.log(window.scrollY);
        if(window.scrollY >= 400 && window.scrollY < 800){
            heading1.style.color = '#cc1'
            // console.log('section1 is styled');
        }else if(window.scrollY >= 800 && window.scrollY < 1200){
            heading2.style.color = '#cc1'
            // console.log('section2 is styled');
        }else if(window.scrollY >= 1200 && window.scrollY < 1600){
            heading3.style.color = '#cc1'
            // console.log('section3 is styled');
        }else if(window.scrollY >= 1600){
            heading4.style.color = '#cc1'
            // console.log('section4 is styled');
        }else{
            heading1.style.color = '#fff'
            heading2.style.color = '#fff'
            heading3.style.color = '#fff'
            heading4.style.color = '#fff'
        }
})

日志显示如下错误： Cannot read properties of null (reading 'style') 我想那来自 heading4.style.color 但是我不知道怎么处理。

Answer 1

听起来您从未将 new_h2 添加到页面。由于它不在页面的 DOM、getElementById("heading4") returns null 中 — DOM 中没有包含 id 的元素：

const new_h2 = document.createElement("h2");

new_h2.setAttribute("id", "heading4");

console.log(document.getElementById("heading4")); // null

// Add the element to the page's DOM
document.body.appendChild(new_h2);

console.log(document.getElementById("heading4")); // finds it

您需要将元素添加到 DOM，以便使用 getElementById 或 querySelector.

等方法在 DOM 中找到它

但请注意，您已经引用了元素 (new_h2)。没有必要查找它，并且可能不需要它有一个 id。只需使用 new_h2。（尽管您可能仍需要将其添加到页面。）

旁注：您不需要使用 setAttribute 来设置元素的 id，您可以使用 反射属性为此：

new_h2.id = "heading4";

大多数（但不是全部）有用的属性都有反射属性。你可以看到哪些是 on MDN or in the spec.

为创建的元素设置属性

setAttribute for created element

javascript

setattribute

createelement