change text-align to left with javascript for all classes with text-align justify

There is some static HTML content which I need to display on a mobile device. These files already have their CSS styles, with many many classes.

To improve readability on a small screen I want to change all classes with text-align:justify to text-align:left.

I thin开发者_如何学运维k the most appropriate solution would be to modify the styles in webViewDidFinishLoad method. How can I accomplish this using Javascript?

Thanks in advance

Solved like this:

var styleSheets = document.styleSheets;
for( i=0; i < styleSheets.length; i++ ){
    for( j=0; j < styleSheets[i].cssRules.length; j++){
        var rule = styleSheets[i].cssRules[j];            
        if(rule.style.textAlign=='justify'){
            rule.style.textAlign='left';
        }
    }
}

This works but I am still interested in more elegant solutions w/o jQuery.

Here's a horrible way that i wouldn't actually use myself as it adds an inline style to every element. I can't think of any other way of doing it without specifying the classes or elements you want it to act on.

http://jsfiddle.net/alangilby/e7XfU/

Interesting experiment though. oh and you don't want jquery.

This question is pretty old, but, thought I'd provide my answer for reference. Not sure if this will help for what you needed, but, here is one, non-jQuery way I've used in the past to apply text-align:left to the entire body..

    NSString* css = @"\"body { text-align:left;}\"";
    NSString* js = [NSString stringWithFormat:
                    @"var styleNode = document.createElement('style');\n"
                    "styleNode.type = \"text/css\";\n"
                    "var styleText = document.createTextNode(%@);\n"
                    "styleNode.appendChild(styleText);\n"
                    "document.getElementsByTagName('head')[0].appendChild(styleNode);\n",css];
    [self.webView stringByEvaluatingJavaScriptFromString:js];