使用Master Page时无显式body标签如何通过JS修改页面背景图

你在Master Page（母版页）文件里看不到手写的<body>标签是母版页机制的正常现象——公共的页面外层结构（包括<html>、<head>、<body>标签）都定义在公共母版文件中，你当前编辑的内容页只是填充<body>内部的区块内容，浏览器加载完整页面后会自动拼接生成完整DOM树，body节点必然存在，不需要在你当前编辑的内容页源码里找这个标签。

直接用下面几种方式获取即可：

• 最简便的方式是直接用DOM原生提供的全局属性，完全不需要自己写查找逻辑：

// 直接获取body元素引用
const bodyEl = document.body;

// 绑定按钮切换背景的示例逻辑
const toggleBtn = document.querySelector('#toggleBgBtn');
toggleBtn.addEventListener('click', () => {
  bodyEl.style.backgroundImage = 'url(./assets/bg-new.jpg)';
  bodyEl.style.backgroundSize = 'cover';
  bodyEl.style.backgroundAttachment = 'fixed';
});

• 如果你习惯用标签选择的方法也完全可行，注意getElementsByTagName返回的是类数组集合，取第一个元素即可：

const bodyEl = document.getElementsByTagName('body')[0];

注意：所有DOM操作逻辑需要等DOM树解析完成后再执行，避免出现找不到元素的报错。你可以把脚本标签放到页面内容的最末尾，或者用DOMContentLoaded事件包裹所有操作逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 所有获取元素、绑定事件的逻辑都写在这个回调里
  const bodyEl = document.body;
  // 其余业务代码
});

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