Как установить встроенный CSS элемента по умолчанию с помощью JavaScript?

Question

У меня есть простая функция, в которой я изменяю стиль текста по умолчанию, когда флажок установлен, и меняю стиль, возвращаемый по умолчанию, когда флажок снят.

terms.style = ""; должен сбросить стиль до значения по умолчанию, но по некоторым причинам это не так, и я абсолютно не знаю, почему.Я знаю, что область действия else выполняется, когда флажок снят, так как я проверял это вручную, вводя другой стиль.

const form = document.getElementById('form');
const checkBox = form.querySelector('input[name=termsCheckBox]');

checkBox.addEventListener('click', function(){
    const terms = document.getElementById('termsText');
    if (checkBox.checked){
        terms.style = "color: black; font-weight: normal";
    } else {
        terms.style = "";
    }
});//end of function

Answer 1

Вы можете получить встроенный CSS в атрибуте style элемента, используя getAttribute(), сохранить его в переменной и при включении / снятии флажка вставить флажок и удалить его из атрибута style

var checkBox = document.querySelector('#form input[name=termsCheckBox]'),
    terms = document.getElementById('termsText'),
    style = terms.getAttribute('style');

checkBox.addEventListener('click', function(){
  if (checkBox.checked)
    terms.style.cssText = "color:black; font-weight:normal";
  else
    terms.style.cssText = style;
});

<form id="form">
  <input type="checkbox" name="termsCheckBox">
  <textarea id="termsText" style="color:red; font-weight:bold">termsText</textarea>
</form>

Answer 2

В соответствии с MDN :

Стили не следует устанавливать, назначая строку непосредственно свойству стиля (как в elt.style = "color: blue;")

Правильный путь будет:

checkBox.addEventListener('click', function(){
    const terms = document.getElementById('termsText');

    if(checkBox.checked){
        terms.style.color = "black";
        terms.style.fontWeight = "normal";
    }else{
        terms.style.color = "";
        terms.style.fontWeight = "";
    }
});