javascript - 将单独的按钮映射到单独的 CSS 文件以更改我页面的背景图像

Question

我正在尝试通过单击同一页面上的不同按钮调用不同的 CSS 文件来使用 Angular f/w 更改我的页面背景。

CSS1.css

body {
     background-image: url("./Images/mg.jpg");
}

CSS2.css

body {
     background-image: url("./Images/mg.jpg");
}

在 html 文件中，我试图创建 2 个按钮，以便在单击按钮 1 时调用 CSS1.css 文件，在单击按钮 2 时调用 CSS2.css 文件。

我试图通过为按钮创建一个 ID 并将脚本函​​数函数映射到它来访问 CSS 文件，但是我遇到了一些运行时错误

HTML 文件

<button type="button" id="button1" onclick="myFunction()">background1</button>

<link rel="stylesheet" type="text/CSS" href="CSS1.css" id="theme">

脚本文件

function myFunction()
{   
document.getElementById("button1")= document.getElementById("theme");
}

你能告诉我我在这里做错了什么吗？ 谢谢。

Answer 1

样式表链接会立即加载样式表。您不需要自定义 Javascript 即可应用它。

为了达到你想要的效果，你可以删除链接标签并像这样修改函数:

function myFunction() {   
    document.body.style.background = "url('./Images/mg.jpg')";
}