changing a stylesheet with java-script

GerbenRienkGerbenRienk Posts: 752 ✭✭✭
One of my clients asked if for one CRF the style sheet could be changed a bit: align the left-item text to the left and have a bit more space. (Sounds familiar?)
But, as they work in a multi-study-setup of OpenClinica, they did not want to change the styles.css.
I came up with this java-script-solution. I put it in the Instructions part of the first section.
It works for both IE8 and FF3, so I thought I’d share it.
The result is this:

The script is
var cssRules;
for (var S = 0; S < document.styleSheets.length; S++) {
if (document.styleSheets[S]['rules']) {
cssRules = 'rules';
}
if (document.styleSheets[S]['cssRules']) {
cssRules = 'cssRules';
}
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++){
if (document.styleSheets[S][cssRules][R].selectorText == ".aka_text_block"){
document.styleSheets[S][cssRules][R].style["width"] = "20em";
document.styleSheets[S][cssRules][R].style["textAlign"] = "left";
}
}
}

And what is basically does is first determine how to loop through the stylesheets, by using “rules” or “cssRules”, depending on the browser. Then it loops through all the classes, until it finds “.aka_text_block”. Then it changes the width to 20em and the text-align to left. (This last bit was tricky, as text-align became textAlign.)

Have fun.

Gerben Rienk Visser
http://www.trialdatasolutions.com
Attachments:
Jscript.zip 13.5 KB

Comments

  • GerbenRienkGerbenRienk Posts: 752 ✭✭✭
    One of my clients asked if for one CRF the style sheet could be changed a bit: align the left-item text to the left and have a bit more space. (Sounds familiar?)
    But, as they work in a multi-study-setup of OpenClinica, they did not want to change the styles.css.
    I came up with this java-script-solution. I put it in the Instructions part of the first section.
    It works for both IE8 and FF3, so I thought I’d share it.
    The result is this:

    The script is
    var cssRules;
    for (var S = 0; S < document.styleSheets.length; S++) {
    if (document.styleSheets[S]['rules']) {
    cssRules = 'rules';
    }
    if (document.styleSheets[S]['cssRules']) {
    cssRules = 'cssRules';
    }
    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++){
    if (document.styleSheets[S][cssRules][R].selectorText == ".aka_text_block"){
    document.styleSheets[S][cssRules][R].style["width"] = "20em";
    document.styleSheets[S][cssRules][R].style["textAlign"] = "left";
    }
    }
    }

    And what is basically does is first determine how to loop through the stylesheets, by using “rules” or “cssRules”, depending on the browser. Then it loops through all the classes, until it finds “.aka_text_block”. Then it changes the width to 20em and the text-align to left. (This last bit was tricky, as text-align became textAlign.)

    Have fun.

    Gerben Rienk Visser
    http://www.trialdatasolutions.com
    Attachments:
    Jscript.zip 13.5 KB
This discussion has been closed.