Question

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

我已经构建了一个基本功能，旨在使用两种样式在我的页面上设置所有Checkbox的样式。 float: left; & 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设置样式被忽略。因此问题的根源。

我知道在设置!important时我需要像这样使用setProperty; 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具有更高的优先级。

Answer 2

应避免使用!important，这是在所有情况下的最后手段。通常，CSS的继承几乎可以在所有情况下正常工作。

但是，只是偶尔需要将属性强制为继承的样式以外的样式。

通常，仅覆盖行为异常的那些属性。

在所有内容上放置!important是不明智的恕我直言。

适用于所有JS风格的ele。好主意还是不？

2 个答案: