Изменение значения strokeStyle из ввода - PullRequest
Новая
       33

Изменение значения strokeStyle из ввода

0 голосов
/ 05 августа 2020

Я создаю простое приложение для рисования с помощью vanilla Javascript. Моя текущая проблема заключается в том, что я пытаюсь изменить значение strokeStyle из ввода, но просто не могу понять, как это сделать. Я попытался сделать это с помощью значения CSS root, но если есть другой простой способ сделать это, я готов попробовать. 

<div class="optioninputs">
   <label for="brushcolor"></label>
   <input id="brushcolor" type="color" name="brushcolor" value="#000000">
</div>

Вот мой код HTML и это входное значение Пытаюсь изменить. 

:root {
   --brushcolor: #000000;
}

CSS root значение. 

// Get brushcolor root value
const brushElement = document.getElementById('brushcolor');
const brushColor = getComputedStyle(brushElement). getPropertyValue('--brushcolor');

context.strokeStyle = brushColor;

Проблема сама по себе. Это дает правильное root значение из CSS, но как изменить это root значение с Javascript?

EDIT: 

brushElement.addEventListener('change', (e) => {
  document.documentElement.style.setProperty('--brushcolor', e.target.value);
});

Я пробовал это, но он не работал

1 Ответ

0 голосов
/ 05 августа 2020

Кажется, все работает нормально. Может быть, вам нужно событие «input» вместо «change»?

Событие input немедленно изменит его Событие change изменит его только после того, как вы щелкните за пределами палитры цветов

Если вы хотите использовать это значение цвета, вы можете просто назначить его переменной 

context.strokeStyle = e.target.value;


document.getElementById('brushcolor').addEventListener('change', e => {
  document.documentElement.style.setProperty('--brushcolor', e.target.value);
});
document.getElementById('brushcolor2').addEventListener('input', e => {
  document.documentElement.style.setProperty('--brushcolor', e.target.value);
});
:root {
  --brushcolor: #000000;
}

.variablebackground {
  background-color: var(--brushcolor);
  width: 200px;
  height: 100px;
}
<html>

<body>
  <div class="variablebackground"></div>
  <div class="optioninputs">
    <label for="brushcolor">change eventlistener</label>
    <input id="brushcolor" type="color" name="brushcolor" value="#000000">
    <br />
    <label for="brushcolor2">input eventlistener</label>
    <input id="brushcolor2" type="color" name="brushcolor2" value="#000000">
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...