{"id":30279,"date":"2017-05-21T03:01:05","date_gmt":"2017-05-20T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=30279"},"modified":"2017-05-21T12:25:19","modified_gmt":"2017-05-21T02:25:19","slug":"css-style-javascript-dom-override-onload-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-javascript-dom-override-onload-primer-tutorial\/","title":{"rendered":"CSS Style Javascript DOM Override Onload Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Style Javascript DOM Override Onload Primer Tutorial<\/p><\/div>\n

We’ve long been fascinated by CSS stylesheets “living” with HTML elements in their “loose” (but you must admit) very flexible arrangement. Today we’re travelling more down that road of discovery of Javascript DOM to see what can be done not using jQuery, but plain old Javascript (clientside) code to change CSS stylesheet settings “on the onload event<\/i> fly”, shall we say. We’ve explored this topic before when we presented Dynamic Javascript and CSS Primer Tutorial<\/a>, but today’s ideas, for which we would like to thank this great link<\/a> for steering us into the right direction to base the Javascript DOM coding around the CSSStyleDeclaration<\/i> object.<\/p>\n

You can tell from the one (critical to the success of methodology) line of code below …<\/p>\n


\nstyleObj = document.styleSheets[k].cssRules[j].style;
\n<\/code><\/p>\n

… how “loose” and “flexible” the two …<\/p>\n

    \n
  1. HTML element … and …<\/li>\n
  2. CSS styling<\/li>\n<\/ol>\n

    … hang together. As you might surmise from “styleSheets[k]” above you can have many stylesheets involved in a webpage’s styling (and remember the “C” in “CSS” stands for “Cascading”), and the “cssRules[j]” tells you that any one stylesheet “set” can contain many CSS Rules, which I guess you can most easily get your head around as a CSS Rule ends with a “}<\/font>” before which CSS Styling elements<\/font> are bounded at their start by a “{<\/font>” and before this is the Parent CSS Rule<\/font> as with …<\/p>\n


    \nbody<\/font> {<\/font>
    \n background-color: orange;
    \n height: 345px;<\/font>
    \n}<\/font>
    \n<\/code><\/p>\n

    What is the mechanism by which we make this a dynamically changeable CSS Styling scenario during the webpage’s document.body onload<\/i> event triggered logic?<\/p>\n

      \n
    1. a Javascript function is called at the webpage’s onload<\/i> event via<\/b> …
      \n
      \n<body onload='forcsscheck();'<\/b>>
      \n<\/code>\n<\/li>\n
    2. that code traverses all relevant stylesheets and all relevant rules of those stylesheets and backwards through that rule’s styling elements to determine styling element name\/value<\/i> pairings, allowing …<\/li>\n
    3. a Javascript prompt window …
      \n
      \nfunction forcsscheck() {
      \n\/\/ Thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CSSStyleDeclaration
      \nif (document.URL.indexOf('isokayasis=') == -1) {
      \nvar styleObj = forcsscheck, j=0, k=0, tval='', cval='', nameString='', i, prule='',title='';
      \nwhile (styleObj != null) {
      \n<\/b>
      \nwhile (styleObj != null) {
      \nstyleObj = document.styleSheets[k].cssRules[j].style;
      \n<\/b>
      \nif (styleObj != null) {
      \nprule = styleObj.parentRule.cssText;
      \ntitle = styleObj.cssText;
      \n<\/b>
      \nfor (i = styleObj.length; i--;) {
      \n nameString = styleObj[i];
      \n \/\/styleObj.removeProperty(nameString);
      \n tval = ('' + title).split(('' + nameString) + ':')[1].split(';')[0];
      \n cval=prompt('Regarding current CSS Stylesheet definition ... ' + String.fromCharCode(10) + String.fromCharCode(10) + title.split(';')[i] + ';' + String.fromCharCode(10) + String.fromCharCode(10) + ' ... feel free to change the value suggested within the CSS Rule ... ' + String.fromCharCode(10) + String.fromCharCode(10) + prule + String.fromCharCode(10) + String.fromCharCode(10), tval);
      \n if (cval != null) {
      \n if (cval != tval) {
      \n styleObj.setProperty(nameString, cval);
      \n \/\/alert('Within ' + prule + ' ... ' + nameString + ' changed to ' + cval + ' (from ' + tval + ')');
      \n document.getElementById('findings').innerHTML+='Within <b>' + prule + '<\/b> ... ' + nameString + ' changed to <b>' + cval + '<\/b> (from ' + tval + ')<br>';
      \n }
      \n }
      \n}
      \nj++;
      \n}
      \n}
      \nstyleObj = forcsscheck;
      \nk++;
      \n}
      \n}
      \n}
      \n<\/code>
      \n… shows what the program knows and allows the user to change a default value that is the current value of the “name\/value” pairing as described above, and if the entered value is different …<\/li>\n
    4. CSSStyleDeclaration’s setProperty(name,value)<\/i> method is called to update the (now dynamic) stylesheet (styling) data associated with the webpage’s HTML element contents … and so, voila …<\/li>\n
    5. at the end of interactivity with the user the webpage will show with these new settings as changed, and we add a report of changes down the bottom of our “proof of concept” “first draft” live run<\/a>. You can download the HTML and CSS and Javascript (DOM) code for are_you_happy_with_my_or_do_you_think_my_derriere_needs_work.html<\/a> to peruse, as well. We hope it opens some doors, or Windows (chortle I.T.).<\/p>\n

      If this was interesting you may be interested in this<\/a> too.<\/p>\n