javascript - 基于 URL 的不同 CSS

Question

我必须拥有相同名称的域名，一个以 .nl 结尾，一个以 .be 结尾。例如domain.nl和domain.be。它们遵循相同的一般样式，但我不希望某些元素根据 .nl 和 .be 具有不同的样式。如何在不加载额外 css 文件的情况下实现此目的？

Answer 1

如果您使用纯 Javascript，我建议为域创建不同的 CSS 文件；仅添加 2 个不同文件中的差异，一个用于 be，另一个用于 nl。

somefilename_be.css

{
    body: 'green';
}

somefilename_nl.css

{
    body: 'red';
}

所有相同的样式都应该放在一个通用文件中，例如 common.css。

然后您可以根据域有条件地加载 CSS 文件。

if (window.location.host.split('.')[1] === "be")
    document.write('<link rel="stylesheet" href="somefilename_be.css" />');
else 
    document.write('<link rel="stylesheet" href="somefilename_nl.css" />');

使用 JS 框架(React、Angular、Vue、Next、Svelte)

if (window.location.host.split('.')[1] === "be")
    import('somefilename_be.css'));    
else 
    import('somefilename_nl.css'));