Working with the CSSstyleSheet API
- Changing the selectorText -
Test 2 - correcting script errors
The "Analize JS" option in the JS Panel of the CodePen is reporting that the "i" and "j" variables are missing a declaration as var (and
a superfluous ";"). Changed the script in that way (see source code).
See what happens!
Testing a style update
- Use the Developer Tool of the browser and go to the 2nd
<style>block in the<head>. - Click right and "Edit as HTML".
- Delete the word
mainof the selector rulemain code { ... } - 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. - Then use the button to update the selectorText via the
CSSStyleSheetAPI.
This is ".testbox1"This is ".testbox2"
The initial selectorText for each style rule of the 2nd style block is:
*
main code
.testbox1
.testbox2
The updated selectorText for each style rule of the 2nd style block is:
*
code
.otherClass
Results
- The results of this test version 2 are the same as in the first test ...
- IE-11: still not working - the Console Tab of the Developer Pane of IE-11 is alerting for a script error in "line 119".
That is the line with thefor (var i of myRules){...}code. Good for the next version!
Conclusions
- The CodePen was not telling the truth, the whole truth and nothing but the truth.
- There must be more leaks in the javascript ...