无法修改HTML时，JS切换CSS样式文件失效问题求助

问题根源 #

你的按钮类型是submit且包裹在<form>标签内，点击这类按钮时浏览器会默认触发表单提交操作，导致页面刷新重载——刚修改的CSS链接还没生效，页面就回到初始状态，所以样式切换看起来没起作用。

修复方案 #

在每个按钮的点击事件处理函数中，添加event.preventDefault()阻止表单提交的默认行为。修改后的JavaScript代码如下：

"use strict";

window.onload = function() {
    document.getElementById('styleA').addEventListener('click', (e) => {
        // 阻止表单提交的默认行为
        e.preventDefault();
        document.getElementById('styleSheet').setAttribute('href', 'styleA.css');
    });
    document.getElementById('styleB').addEventListener('click', (e) => {
        // 阻止表单提交的默认行为
        e.preventDefault();
        document.getElementById('styleSheet').setAttribute('href', 'styleB.css');
    });
};

补充说明 #

• 你代码中定义的let elements = document.getElementsByTagName('button');未被使用，可直接删除以精简代码。
• 阻止默认行为后，页面不会刷新，CSS链接的修改就能正常生效，样式切换功能即可正常运行。

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