Member 13120298 Ответов: 1

Изменение нескольких цветов одновременно


Здравствуйте, я постараюсь объяснить это как можно лучше, но я научился кодировать в основном практически не читая так много учебников, поэтому, пожалуйста, простите любое использование неправильного технического жаргона.

Я уже некоторое время кодирую темы на tumblr, и у них есть функция, которая позволяет изменять цвет фона (или шрифт, или размер шрифта, или заполнение, что угодно) на нескольких дивах, выбирая новое значение в "панели управления". Соответствующий код, который я мог бы найти для изменения цвета боковой панели, например, таков: :

<meta name="color:Sidebar" content=""/>


в голову, а позже

#side {
    top: 60px;
    left: 60px;
    position: fixed;  background: {color:Sidebar};
    width: 255px; border: 1px solid white; box-shadow: 2px 2px;  
}


В "панели управления", которую могут видеть пользователи (за неимением лучшего описания), есть возможность изменить цвет боковой панели. Я не собираюсь создавать причудливый интерфейс, который позволяет людям выбирать цвет из выпадающего меню или что-то еще. Просто способ определить значение в одном разделе кода и иметь это значение, на которое ссылаются/используют другие дивы в коде.

Однако... Я понятия не имею, как это сделать, написав тему на tumblr. Возможно ли это вообще? Я бы хотел избежать использования javascript, если это возможно.

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

Что я уже пробовал:

Я действительно не знаю, с чего начать. Я попытался просто использовать тег & lt;meta / & gt; и ссылаться на него так же, как на код темы на tumblr, но я не думал, что это сработает, так как фактическое значение нигде не было определено, и, к моему удивлению, это ничего не дало.

1 Ответов

Рейтинг:
1

Member 13120882

Я бы рекомендовал использовать базовый javascript, так как CSS не допускает переменных. Возможно, использовать фреймворк типа Sass или меньше, но это требует изучения фреймворков, что может быть трудно для большинства людей.

Например,

var color1 = "#990dfa";
var someDiv = Document.getElementById('yourDivId');
someDiv.style.backgroundColor = color1;
var nextDiv = Document.getElementById('aWeirdDiv').style.color = color1;
Обратите внимание, что это не только для divs - это для всех элементов html5.

Источники: Получить содержимое DIV с помощью JavaScript-Stack Overflow[^], Javascript change Div style - переполнение стека[^]

Добрый День-Участник 13120882