Как изменить шрифт через
Имеется HTML примерно с таким кодом
<label class="select">Выберите шрифт</label>
<select id="font" class="select">
<option style="color: white; font-family: comic sans ms" value="comic sans ms">Comic Sans MS</option>
<option style="color: white; font-family: segoe script" value="segoe script">Segoe Script</option>
</select>
Мне надо сделать так, что-бы при выборе одного из этих вариантов менялся шрифт в CSS классе .select
Ну или значение CSS переменной (я только недавно начал заниматься ВЕБ-ом, поэтому вообще не шарю ни в CSS, ни в HTML, ни в JavaScript
Ответы (1 шт):
Автор решения: Denis640Kb
→ Ссылка
Можно таким образом (см. комментарии):
// отслеживаем изменение поля select
font.onchange = function() {
// Получаем значение выбранного поля
var selected = font.value;
// Получаем элемент, в котором будем менять шрифт.
var change = document.getElementsByClassName('select');
// Меняем шрифт на полученный из поля select
change[0].style.fontFamily = selected;
}
.select {
color: #000000;
}
<label class="select">Выберите шрифт</label>
<select id="font" class="select">
<option style="color: white;"></option>
<option style="color: white; font-family: comic sans ms" value="comic sans ms">
Comic Sans MS
</option>
<option style="color: white; font-family: segoe script" value="sans-serif">
sans-serif
</option>
</select>