JavaScript动态创建h2设ID后访问style属性报null错误如何解决

错误根因 #

你通过document.createElement创建的元素仅存在于JS内存中，并未插入到页面DOM树里。document.getElementById只会遍历当前已挂载到DOM树的节点，因此你调用该方法获取heading4时会返回null，后续访问null.style就会触发Cannot read properties of null (reading 'style')报错。

解决方案 #

方案1：先插入DOM再获取元素

创建元素并设置ID后，先将元素插入到你需要的DOM节点位置（比如正文容器、body末尾等），再调用getElementById获取：

const new_h2 = document.createElement('h2')
new_h2.setAttribute('id', 'heading4');
// 将元素插入DOM树，此处以插入body末尾为例，可替换为你需要的父容器
document.body.appendChild(new_h2)
// 插入后再获取即可拿到有效元素
const heading4 = document.getElementById('heading4')

方案2：直接复用已创建的元素变量（更推荐）

你已经持有new_h2这个指向新建元素的变量，完全不需要额外调用getElementById查询DOM，直接使用该变量即可，还能减少DOM查询开销：

const new_h2 = document.createElement('h2')
new_h2.setAttribute('id', 'heading4');
document.body.appendChild(new_h2)

window.addEventListener('scroll', function(){
    console.log(window.scrollY);
    if(window.scrollY >= 400 && window.scrollY < 800){
        heading1.style.color = '#cc1'
    }else if(window.scrollY >= 800 && window.scrollY < 1200){
        heading2.style.color = '#cc1'
    }else if(window.scrollY >= 1200 && window.scrollY < 1600){
        heading3.style.color = '#cc1'
    }else if(window.scrollY >= 1600){
        // 直接使用已有的new_h2变量即可
        new_h2.style.color = '#cc1'
    }else{
        heading1.style.color = '#fff'
        heading2.style.color = '#fff'
        heading3.style.color = '#fff'
        new_h2.style.color = '#fff'
    }
})

额外优化建议 #

可以在访问元素的style属性前增加非空判断，避免其他heading元素也出现类似的空值报错：

// 示例
if (heading4) heading4.style.color = '#cc1'

内容的提问来源于stack exchange，提问作者Hany Taha