能否用JavaScript修改script元素？实际代码失效求助

核心结论 #

可以修改script元素的src属性，但修改已加载完成的script标签的src不会触发浏览器重新下载并执行新脚本——这就是你的代码失效的核心原因。

为什么CSS修改href生效，但script不行？ #

• CSS的<link>标签：浏览器内置了样式更新机制，会监听其href属性变化，自动重新请求新样式并应用到页面。
• Script的<script>标签：一旦脚本加载并执行完成，修改src属性只会改变标签的属性值，不会触发任何重新加载或执行行为，浏览器没有为script标签设计这种自动更新逻辑。

你的代码失效的具体原因 #

你的toggleDLmode函数中，修改foot.src只是改变了<script id="foot">的属性，但这个脚本已经在页面加载时执行过/js/footer.js了，浏览器不会因为属性变化去加载/js/dark-footer.js。

解决方法 #

要实现切换脚本的效果，你需要手动创建新的script标签来加载目标脚本，或者提前加载所有脚本并通过条件判断执行对应逻辑。

方法1：动态创建新script标签（推荐） #

移除旧的script标签，创建新标签并设置src，插入到DOM中：

var css = document.getElementById("css");
var footContainer = document.getElementById("foot").parentNode;

function toggleDLmode(m) {
  // 处理CSS逻辑
  if (dlmodebool) {
    css.href = "/css/dark.css";
    loadScript("/js/dark-footer.js");
  } else {
    css.href = "/css/index.css";
    loadScript("/js/footer.js");
  }
}

function loadScript(src) {
  // 移除旧的foot脚本标签
  var oldFoot = document.getElementById("foot");
  if (oldFoot) oldFoot.remove();
  
  // 创建新的script标签
  var newFoot = document.createElement("script");
  newFoot.id = "foot";
  newFoot.src = src;
  
  // 插入到原来的位置
  footContainer.appendChild(newFoot);
}

方法2：提前加载所有脚本，通过条件执行逻辑 #

如果两个脚本的内容都是可调用的函数，可以提前加载，然后在切换时执行对应逻辑：

// 提前在head中加载两个脚本
// <script src="/js/footer.js"></script>
// <script src="/js/dark-footer.js"></script>

var css = document.getElementById("css");

function toggleDLmode(m) {
  if (dlmodebool) {
    css.href = "/css/dark.css";
    // 假设dark-footer.js暴露了initDarkFooter函数
    initDarkFooter();
  } else {
    css.href = "/css/index.css";
    // 假设footer.js暴露了initFooter函数
    initFooter();
  }
}

额外注意事项 #

你的HTML中有一个script标签放在</html>闭合标签之后，虽然浏览器会容错解析，但不符合HTML规范，建议将所有script标签放在<body>内部的末尾或<head>中（配合defer/async）。

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