如何使文本区域内容中的外观值取决于选定的值

<textarea id="myTextarea"></textarea>

var textarea = document.getElementById("myTextarea");

textarea.addEventListener("input", function() {
  var selectedValue = textarea.value;

  // 根据选定的值来改变外观值
  // 可以使用条件语句或者switch语句来实现不同选项对应不同的外观值

  if (selectedValue === "option1") {
    // 设置外观值为option1对应的样式
    textarea.style.color = "red";
    textarea.style.backgroundColor = "yellow";
  } else if (selectedValue === "option2") {
    // 设置外观值为option2对应的样式
    textarea.style.color = "blue";
    textarea.style.backgroundColor = "green";
  } else {
    // 默认情况下，设置外观值为默认样式
    textarea.style.color = "black";
    textarea.style.backgroundColor = "white";
  }
});

<style>
  .option1 {
    color: red;
    background-color: yellow;
  }

  .option2 {
    color: blue;
    background-color: green;
  }
</style>

<textarea id="myTextarea"></textarea>

<script>
  var textarea = document.getElementById("myTextarea");

  textarea.addEventListener("input", function() {
    var selectedValue = textarea.value;

    // 根据选定的值来切换样式类
    // 可以使用classList属性的add()和remove()方法来切换样式类

    textarea.classList.remove("option1");
    textarea.classList.remove("option2");

    if (selectedValue === "option1") {
      textarea.classList.add("option1");
    } else if (selectedValue === "option2") {
      textarea.classList.add("option2");
    }
  });
</script>