Apply !important to all JS styled ele. Good Idea or No?

Question

So I'm having a little trouble setting a couple of styles on some checkboxes, for adverse reasons I don't have direct access to the css, or the HTML. However I can use Pure Javascript to influence my project.

I have built a basic function with the intention of styling all Checkboxes on my page with two styles. float: left; & marginRight: 1em. I've included a small snippet showing the results of my labour.

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>

After testing, these js set styles are being ignored. Thus the source of the question.

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

However, what if I were to add it to all the styles in one hit in my example using JS? Is it a good idea to do so? If not why?

If It is ok to use this approach how would I do so?

Possible Answer

// 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

You can add inline styles via JS and they have higher priority than CSS already.