title: CSSStyleSheet.insertRule - trouble with indexing and dynamic variables using Javascript
body: <p>I've read up on inserting css rules using Javascript and have managed to get it working (after some trial &amp; error). So I have 2 questions:</p>
  
  <p><strong>Q.1</strong> Why is an index &lt; 1 not working - see Mozilla example (and many others) below:</p>
  
  <pre><code>// push a new rule onto the top of my stylesheet - doesn't work...
  myStyle.insertRule("#blanc { color: white }", 0); // returns Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to insert the rule.
  
  // change the index and it works!
  myStyle.insertRule("#blanc { color: white }", 1); 
  </code></pre>
  
  <p>This <a href="https://davidwalsh.name/add-rules-stylesheets" rel="nofollow noreferrer">article by David Walsh</a> (very helpful), explains that the default for index is -1. He uses 1 in his example, which is what worked for me. Anything less than 1, ie 0 or -1 (as per the default) threw the following errors:</p>
  
  <p><strong>Index -1 error:</strong>
  Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': The index provided (4294967295) is larger than the maximum index (2071).</p>
  
  <p><strong>Index 0 error:</strong>
  Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to insert the rule.</p>
  
  <p>It's not a huge problem, but it does mean I can't control specificity. I can use !important or rework the css/inserted rule so that it overrides any existing styles, but as I'm just learning JavaScript, I'd really like to know why it's not working as expected. Does anyone have any ideas?</p>
  
  <p><strong>Q.2</strong> Having got it to work using index 1, I now want to pull in values dynamically. I have the item names in an array, which is used to create multiple objects, inside which are the property values I want to use for the individual style rules for that object.</p>
  
  <p>Basically what I'm trying to output is this (which works):</p>
  
  <pre><code>styleSheet.insertRule("#item { border-top-color: #000000; border-right-color: #ffffff; }", 1);  
  </code></pre>
  
  <p>But using variables, something like this:</p>
  
  <pre><code>styleSheet.insertRule("[itemName] { border-top-color: [itemName.value1]; border-right-color: [itemName.value2]; }", 1); // itemName.valueX being the object's array item
  </code></pre>
  
  <p>I've tried heaps of things, but I can't get the array item bit to work, ie colour and colour4 should actually be itemName.value1/2 or a var that equals the same. This is the closest I've got so far...</p>
  
  <pre><code>styleSheet.insertRule("#" + name + " { border-top-color: " + colour + "; border-right-color: " + colour4 + " !important; }", 1); // 1st rule works, 2nd doesn't show anything 
  </code></pre>
  
  <p>It all works lovely if I write it manually (as per the 1st example), but how to do it dynamically? I've found info on insertRule, but not using dynamic values - can anyone help/point me in the right direction?</p>
  
  <p>Many thanks in advance!</p>
  
  <p>Expanded WIP for more clarity:</p>
  
  <pre><code>function itemColours() {
  
  for (i = 3; i &lt; itemsArray.length; i++) {
  
  let name = itemsArray[i];
  let colour = #000000;
  
  console.log(item1.value); // returns the hex value I want to use in the rule
  
  styleSheet.insertRule("#" + name + " { border-top-color: " + colour + "; border-right-color: " + name + ".value !important; }", 1);
  // rule 1 works, rule 2 doesn't...
  }
  </code></pre>