javascript - 从复选框中获取列表并插入到 css 中

Question

我希望用户能够从一行复选框中选择要添加到 CSS 中的内容。

我正在使用 JS 来搜索选中的框，获取名称，放入列表，然后获取列表并将其放入 CSS 作为值属性(property)。

我不知道它是不是错误地进入了 CSS，还是根本没有进入。

$(document).ready(function () {

  var checkbox = document.querySelector('[type="checkbox"]');

  checkbox.addEventListener('change', function() {
      getOTFeaturesTextA();
  });
});

function getOTFeaturesTextA(){

  var textA = document.getElementById("textA"),
    chkArray = [];

  $(".ot-textA:checked").each(function() {
    chkArray.push($(this).val());
  });

  var selected;
  selected = chkArray.join(',') ;

  if(selected.length > 0){
    textA.css("font-feature-settings", selected + ", liga");	
  }else{
    textA.css("font-feature-settings", "liga");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ot-checkboxes">
  <p>
    <label>
      <input type="checkbox" name="frac" value="'frac'" class="ot-textA" id="frac">
      Fraction</label>
    <br>
    <label>
      <input type="checkbox" name="aalt" value="'aalt'" class="ot-textA" id="aalt">
      Alternatives</label>
    <br>
        <label>
      <input type="checkbox" name="onum" value="'onum'" class="ot-textA" id="onum">
      Oldstyle Numbers</label>
  </p>
</div>
<div id="textA" contenteditable="true"><span>Trying out checkboxes 3/4 </span></div>

Answer 1

在此用例中使用样式而不是 css

textA.style['font-feature-settings'] = selected + ", liga";