Django项目中通过JavaScript修改页面样式无效问题求助

你引入的index.js放在head块内执行，此时页面body中的body2元素还未完成渲染，document.getElementById("body2")会返回null，调用style属性自然没有效果。第一行alert能正常执行是因为window对象在head加载阶段就已经存在，不受DOM加载进度影响。

• 方案1：用DOM加载完成事件包裹代码
  修改index.js的代码，将逻辑放到DOMContentLoaded事件回调中，确保所有操作DOM的逻辑都会在DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function () {
  alert(window.innerWidth);
  document.getElementById("body2").style.color = "#0000ff";
})

• 方案2：调整JS引入位置
  将index.js的引入代码从head的ecss块移动到页面</body>闭合标签之前，确保JS执行时所有DOM元素已经加载完成。

• 方案3：使用已引入的jQuery简化写法
  你已经在head中引入了jQuery，也可以用jQuery的DOM就绪回调写法：

$(function () {
  alert(window.innerWidth);
  $('#body2').css('color', '#0000ff');
})

你可以在原有第二行代码前添加console.log(document.getElementById("body2"))，打开浏览器开发者工具的控制台，若输出为null即可确认是DOM未加载导致的问题。
如果调整后还是没有效果，可以额外检查两个点：

1. 页面元素的id是否确实为body2，没有拼写错误
2. 有没有其他CSS规则使用!important修饰了对应样式，覆盖了JS设置的行内样式优先级

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