Как сделать кнопку, которая может изменить цвет фона в узоре?

Я хотел бы сделать кнопку, когда при нажатии на нее меняет цвет фона моей веб-страницы. Я уже пробовал с Javascript & Css, но не успел! Вот мой код:Как сделать кнопку, которая может изменить цвет фона в узоре?

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      Test 
     </title> 
     <style> 
     .bgcolor1{ 
      background-color:black; 
     } 
     .bgcolor2{ 
      background-color:grey; 
     } 
     </style> 
     <script type="text/javascript"> 

     </script> 
    </head> 
    <body class="bgcolor1"> 
     <button onclick="this.className = 'bgcolor2'">Change COLOUR</button> 
    </body> 
</html>

Как вы можете видеть, когда пользователь нажимает на кнопку она должна изменить класс «bgcolor2» так что цвет фона будет серым, но он просто меняет цвет фона кнопки на серый & не документ! Итак, как я могу изменить цвет фона документа с помощью css или js или в чем проблема с этим кодом? ТНХ ...

источник

2015-10-24 EmLyrcis Farsi

'document.body.className = 'bgcolor2'' –

<button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button>

this относится к кнопке, а не тело. document.body.className = 'bgcolor2';

источник

2015-10-24 09:53:27 rottenoats

Простой мишень document.body.className вместо this; в этом случае this - это ссылка на кнопку. Сделайте свой атрибут onclick ниже

onclick="document.body.className='myCustomBGColor'"

где myCustomBGColor является класс CSS.

Вот ваш последний рабочий скрипку

 .bgcolor1{ 
 
      background-color:black; 
 
     } 
 
     .bgcolor2{ 
 
      background-color:grey; 
 
     }

<body class="bgcolor1"> 
 
     <button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button> 
 
</body>

источник

2015-10-24 09:56:31

использовать document.body вместо this

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title> 
 
      Test 
 
     </title> 
 
     <style> 
 
     .bgcolor1{ 
 
      background-color:black; 
 
     } 
 
     .bgcolor2{ 
 
      background-color:grey; 
 
     } 
 
     </style> 
 
     <script type="text/javascript"> 
 

 
     </script> 
 
    </head> 
 
    <body class="bgcolor1"> 
 
     <button onclick="document.body.className = 'bgcolor2'">Change COLOUR</button> 
 
    </body> 
 
</html>

источник

2015-10-24 09:57:40

попробовать что-то вроде этого:

HTML

<button onclick="myFunction()">Click me</button>

Javascript

function myFunction(){ 
    document.body.className = 'bgcolor'; 
}

CSS

.bgcolor{ 
    background:red; 
}

DEMO

источник

2015-10-24 10:05:47 next2u

Как сделать кнопку, которая может изменить цвет фона в узоре?

ответ

Смежные вопросы