如何用document.getElementById设置display:none？代码不生效怎么办

• 代码执行时机早于DOM渲染完成
  当JS代码在<img>标签加载到DOM树之前就执行时，document.getElementById会返回null。如果你的代码包含容错逻辑（比如获取元素成功才执行样式修改），就会出现无报错也不生效的情况。可以将JS代码放到<body>标签末尾，或者监听DOMContentLoaded事件后再执行逻辑。
• 存在id重复/大小写不匹配问题
  document.getElementById严格区分id大小写，且如果页面内有多个相同id的元素，只会返回DOM树中第一个匹配的元素。如果第一个匹配的不是你要修改的<img>标签，修改就不会作用到目标元素上，也不会触发报错。
• 目标元素的display属性被CSS规则设置了!important
  行内样式的优先级低于带!important标识的CSS规则，此时通过element.style设置的display属性会被覆盖，不会生效也不会有报错。可以打开浏览器开发者工具的元素面板，查看目标元素的样式计算结果确认是否存在该情况。
• 元素被框架逻辑/后续JS代码重置了样式
  如果你使用了Vue、React等前端框架，直接操作原生DOM的修改会在框架下一次重渲染时被覆盖，看起来就像修改没生效。另外如果后续有其他JS逻辑、定时器回调再次修改了该元素的display属性，也会抵消你的修改。
• 目标元素不在当前文档流内
  如果你要操作的<img>标签在iframe或者Shadow DOM内部，直接用当前页面的document.getElementById无法获取到对应元素，同样会出现无报错无效果的情况。

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