3

Html

  <p>Укажите цвет фона: <input type="color" name="bg" id="color" value="#262626">
  <br><input type="submit" name="submit" value="Применить" id="submit" class="clrbtn">`введите сюда код`

CSS

:root {
    --background-color: #2cba92;
}

html {
  background-size: 100% 100% !important;
  background-color: var(--background-color) !important;
}

JS

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);

const inputs = [].slice.call(document.querySelectorAll('input')); // 2
inputs.forEach(input => input.addEventListener('change', handleUpdate)); // 4

document.addEventListener('DOMContentLoaded', function() {
    var submit = document.getElementById('submit');
    submit.addEventListener('click', function() {
        root.style.setProperty('--background-color', '#88d8b0');
        alert('Успешно!');
    });
});

Требуется, чтоб таким образом менялся фон на сайте (напомню, делается все это в расширении), без его перезагрузки. Но ничего не получается. Что не так?

1
  • document.body.style.backgroundColor = 'red'
    – qwabra
    22 июл 2018 в 16:37

1 ответ 1

0

Это будет работать?

document.addEventListener('DOMContentLoaded', function() {
    var submit = document.getElementById('submit');
    submit.addEventListener('click', function() {
        document.body.style.background = document.getElementById('color').value;
    });
});
body {
    background-color: #2cba92;
}

html {
  background-size: 100% 100% !important;
  background-color: var(--background-color) !important;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
   <p>Укажите цвет фона: <input type="color" name="bg" id="color" value="#262626">
   <br>
   <input type="submit" name="submit" value="Применить" id="submit" class="clrbtn">
</body>
</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.