Working with the CSSstyleSheet API
- Changing the selectorText -

Continuing story in the exchange of views in the topic, especially about the CodePen 'Changing the SelectorText'.
These test pages are stand-alone, so the CodePen machine can not influence the results.
Tested are Firefox, Chrome, Opera and IE-11 on desktop under Windows-7.

Test 1 - the original script reused (with other selectors)

First a Google Font is added as a stylesheet link. After that, the initial CSS is put into 2 style blocks in the <head>> of this document. The first style block has the general styles of this page, the second has the styles for testing.
Note: the script is considering the 3 style items in the <head>> as 3 stylesheets (the 2 style blocks are seen as 2 separate "stylesheets". - The document.styleSheets javascript is inline at the bottom, before the </body> tag.

Testing a style update

  1. Use the Developer Tool of the browser and go to the 2nd <style> block in the <head>.
  2. Click right and "Edit as HTML".
  3. Delete the word main of the selector rule  main code { ... }
  4. Delete the whole style rule .testbox-1 { background: turquoise; color: black } and leave the editor by clicking somewhere in the Developer Pane outside the editor box.
  5. Then use the button to update the selectorText via the CSSStyleSheet API.

This is ".testbox1"This is ".testbox2"

The initial selectorText for each style rule of the 2nd style block is:

main code

The updated selectorText for each style rule of the 2nd style block is:


What should happen

Initially both testboxes are turquoise with black text.
After the change of the CSS the "testbox1" should be green with a white text, because the deleted .testbox1 line (turquoise/black) in the second style block was overruling the green/white of the first style block.
After updating with Javascript (button click) the "testbox2" should be also green with a white text, by a special javascript instruction:

The update will be reflected in the displayed result above. - In the same way you can play with other selectorText's.


The results of this test version are as follows: