Я хочу изменить CSS страницы при нажатии кнопки - PullRequest
Новая
       5

Я хочу изменить CSS страницы при нажатии кнопки

2 голосов
/ 15 февраля 2020

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

<!DOCTYPE html>
<button style="background-color: #252525;
border: 2px;
border-style: solid;
border-color: white;
color: white; 
padding: 10px 32px;
text-align: center;
text-decoration: none; 
display: inline-block;
font-size: 16px;  
font-weight: bold;
margin: 4px 2px;
cursor: pointer;" id="changethemebutton" onclick="changeTheme()">Change Theme</button>


function changeTheme() {
document.getElementById(".background").style.background = "black";
}
</script>
<style>
body{
    background-color:white
}
</style>

Ответы [ 2 ]

2 голосов
/ 15 февраля 2020

Лучший способ установить темный режим на вашем сайте - это переключить класс .dark-mode на вашем теле, используя javascript, а затем стилизовать его, используя css: 

body {
  /* light-mode styles */
  background-color: white;
}

body.dark-mode {
  /* dark-mode styles */
  background-color: black;
}
<button style="background-color: #252525;
border: 2px;
border-style: solid;
border-color: white;
color: white; 
padding: 10px 32px;
text-align: center;
text-decoration: none; 
display: inline-block;
font-size: 16px;  
font-weight: bold;
margin: 4px 2px;
cursor: pointer;" id="changethemebutton" onclick="changeTheme()">Change Theme
</button>

<script>
  function changeTheme() {
    document.body.classList.toggle('dark-mode');  // <-- Toogle dark-mode class to <body>
  }
</script>
0 голосов
/ 15 февраля 2020

Вы пытаетесь нацелить элемент на класс, используя неправильный метод. getElementById предназначается для элементов с указанным id. Если вы пытаетесь настроить таргетинг на класс, самый идеальный способ сделать это - querySelector : 

document.querySelector(".background").style.background = "black";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...