Изменение стилей css при помощи javascript

Question

Изменение стилей css при помощи javascript

Gnn Ngg Ученик (84), на голосовании 1 год назад

Необходимо реализовать функцию changeStyle, которая при вызове обращается последовательно к input-ам (#elem, #style, #value). Получает от них значения, которые сейчас содержаться в текстовых полях (см. своство value). Далее получает доступ к элементу селектор, которого был указан в поле inputa с id="elem". Далее в style у выбраного элемента находит имя свойства, которое указано в поле input с id="style". И присваивает новое значение выбранному свойству из поля с id=value. Таким образом последовательно указывается myDiv, backgroundColor, blue. И цвет панели myDiv сменяется на синий.
Шаблон:

<script>
function changeStyle() {
//тут ответ
}
</script>
</head>
<body>
<div class="myDiv" style="background-color:red; height:300px; font-family:Arial,Helvetica, sans-serif">Текст в блоке</div>
<input type="text" value=".myDiv" id="elem">
<input type="text" value="backgroundColor" id="style">
<input type="text" value="#ccc" id="value">
<input type="button" value="Изменить стиль" onClick="changeStyle()" />
</body>

Answer 1

function changeStyle() {
const elem = document.querySelector(document.querySelector("#elem").value);
const style = document.querySelector("#style").value;
const value = document.querySelector("#value").value;

elem.style [style] = value;
}