Карта отдельная кнопка, чтобы отделить файл CSS, чтобы изменить фоновое изображение моей страницы

Question

Я пытаюсь изменить фон моей страницы, используя угловое ч / б, вызывая различные CSS-файлы при нажатии другой кнопки на той же странице.

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.

Я пытаюсь получить доступ к файлу 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

Метод getElementById() возвращает элемент с атрибутом ID с указанным значением.

Левая сторона document.getElementById("button1") возвращает значение, правая сторона также возвращает значение.Это не разрешено

Answer 2

Вы можете сделать что-то вроде этого:

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>

Совет. Обратите внимание, что я изменил ваш onclick на (click),Я заметил, что один из ваших тегов на ваш вопрос angular.Если вы используете угловой, то вам следует использовать этот атрибут вместо onclick.

TypeScript

myFunction(sheet: string) {
    document.getElementById('theme').setAttribute('href', sheet);
}

Answer 3

ссылки на таблицу стилей загружают таблицу стилей сразу.Вам не нужен пользовательский Javascript для его применения.

Для достижения желаемого эффекта вы можете удалить теги ссылок и изменить функцию следующим образом:

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