如何用JavaScript动态切换CSS文件？表格样式代码调试求助

从你贴的代码来看，核心是通过给<td>添加Rood或Groen类来设置颜色，但没生效的话，大概率是这几个原因：

1. CSS类定义写错了 #

先检查你的CSS文件里有没有正确定义这两个类，注意类名大小写是敏感的（你用的是大写开头），比如：

.Rood {
    color: red; /* 要是改背景色就写background-color */
}
.Groen {
    color: green;
}

如果类名写成小写的rood，或者属性拼错（比如把color写成colour），样式肯定不生效。

2. 样式被优先级更高的规则覆盖了 #

打开浏览器F12开发者工具，选中对应的<td>元素，看样式面板里的Rood/Groen类是不是被划掉了。如果是，说明有其他优先级更高的样式（比如行内样式、ID选择器、更具体的类选择器）把它覆盖了。

解决办法：要么提高你这个类选择器的优先级，比如写成：

table tr td.Rood {
    color: red;
}

万不得已再用!important，尽量优先用更具体的选择器。

3. 数据类型导致判断出错 #

检查waarde的数据类型，如果它是字符串（比如后台返回的是"4"），虽然"4" < 5能成立，但如果是"10"，字符串比较会认为"10"小于"5"，逻辑就错了。

改成转成数字再判断：

if (Number(waarde) < 5) {
    tdp.className = 'Rood';
} else {
    tdp.className = 'Groen';
}

4. 代码执行时机不对 #

确保这段循环代码是在table和list元素已经加载到DOM之后执行的。如果代码放在<head>里，或者页面元素还没渲染就跑了，那创建的元素根本挂不到页面上，自然看不到样式。

可以把代码包在DOM加载完成的事件里：

document.addEventListener('DOMContentLoaded', function() {
    // 你的循环代码放这里
});

有三种常用方式，按需选：

方法1：直接替换已有CSS链接的href #

如果页面已经有固定的CSS链接（给它加个ID），直接改href就行：

<!-- 页面里的初始CSS -->
<link rel="stylesheet" id="main-css" href="default.css">

// 切换到深色主题
document.getElementById('main-css').href = 'dark.css';
// 切回默认
document.getElementById('main-css').href = 'default.css';

方法2：动态创建/移除CSS链接 #

适合需要加载新CSS文件的场景，先删掉旧的动态链接，再创建新的：

function switchCSS(cssUrl) {
    // 移除已有的动态CSS
    const oldLink = document.getElementById('dynamic-css');
    if (oldLink) oldLink.remove();
    // 创建新链接并加到head里
    const newLink = document.createElement('link');
    newLink.id = 'dynamic-css';
    newLink.rel = 'stylesheet';
    newLink.href = cssUrl;
    document.head.appendChild(newLink);
}

// 调用示例
switchCSS('light.css');
switchCSS('dark.css');

方法3：切换HTML类+CSS变量（不用换文件） #

这种更灵活，给<html>加不同的类，让CSS根据类切换样式：

/* 默认变量 */
:root {
    --text-color: #333;
    --bg-color: #fff;
}
/* 深色模式变量 */
.dark-mode:root {
    --text-color: #fff;
    --bg-color: #333;
}
/* 应用变量 */
body {
    color: var(--text-color);
    background-color: var(--bg-color);
}

// 切换深色模式
function toggleDarkMode() {
    document.documentElement.classList.toggle('dark-mode');
}

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