Javascript 映射分离按钮以分离CSS文件以更改我的页面的背景图像

我试图通过点击同一页面上的不同按钮来调用不同的CSS文件，从而使用角度f/w更改页面的背景

CSS1.css

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

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

CSS2.css

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

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

在html文件中，我试图创建两个按钮，这样在单击按钮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");
}

你能告诉我我做错了什么吗？

---

谢谢。

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

要达到您想要的效果，可以删除链接标记并修改如下功能：

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

getElementById（）

方法返回具有指定值的

ID

属性的元素

---

左侧

document.getElementById（“button1”）

返回一个值，右侧也返回一个值。这是不允许的

您可以这样做：

HTML

<link rel="stylesheet" href="CSS1.css" id="theme">

<button type="button" (click)="myFunction('CSS1.css')"> background1 </button>
<button type="button" (click)="myFunction('CSS2.css')"> background2 </button>

---

我怎样才能在angular4中实现这一点。你能告诉我吗？这是我得到的错误，而且按钮没有成功添加。我需要找到使用不同样式表的方法，即单击按钮时使用css文件错误：10%构建模块0/1模块1活动…src/app/screen/screen.component.ts中的ment1\themeproj\src\app\app.module.tsERROR（11,3）：错误TS1068:意外标记。应为构造函数、方法、访问器或属性。src/app/screen/screen.component.ts（39,14）：错误TS1005:'；'预期。src/app/screen/screen.component.ts（42,1）：错误TS1128：需要声明或语句。我没有意识到您正在使用typescript。我现在正在为您编辑。您不能在typescript中的函数之前使用

函数的声明。实际上，我想在angular4中单击buton时更改css文件。