javascript - 将 !important 应用于所有 JS 样式的元素。好主意还是不好？

Question

所以我在为某些复选框设置几个样式时遇到了一些麻烦，因为不利的原因我无法直接访问 css 或 HTML。但是我可以使用纯 Javascript 来影响我的元素。

我构建了一个基本函数，目的是用两种样式设置我页面上所有复选框的样式。 float :左； & marginRight: 1em.我已经包含了一个小片段，显示了我的劳动成果。

function styleEl() {
  // get all elements...
  var bxSyl = document.querySelectorAll('input[type=checkbox]');

  // console.log(bxSyl);

  [].forEach.call(bxSyl, function(bs) {
    // style elements...
    bs.style.cssFloat = "left";
    bs.style.marginRight = "1em";
  });
};

// call it...
styleEl();

.editoropt {
  font-family: Calibri, sans-serif;
  width: 300px;
  background: #0f0;
  padding: .5em;
}

<div class="seq-box-form-field  editoropt  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Ground Floor </span>
    <input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked="true" />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>

<div class="seq-box-form-field  editoropt  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">First Floor </span>
    <input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked="true" />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>

<div class="seq-box-form-field  editoropt  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Second Floor </span>
    <input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked="true" />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>

<div class="seq-box-form-field  editoropt  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Third Floor</span>
    <input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked="true" />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>

经测试，这些js设置样式都被忽略了。这就是问题的来源。

I know when setting !important I need to use setProperty like so; document.body.style.setProperty ("color", "green", "important");

但是，如果我在我的示例中使用 JS 一次将它添加到所有样式中怎么办？这样做是个好主意吗？如果不是为什么？

如果可以使用这种方法，我会怎么做？

可能的答案

// inject style
function ctSe() {
  var css = "input[type='checkbox'] { float:left; margin-right: 1em !important;}",
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);
  console.log(head)
  console.log(style)
  console.log(css)
};

ctSe();

Answer 1

您可以通过 JS 添加内联样式，它们的优先级已经高于 CSS。