使用text-align justify将所有类更改为text-align to left with javascript

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.

我需要在移动设备上显示一些静态HTML内容。这些文件已经有了CSS样式，有很多类。

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

为了提高小屏幕的可读性，我想用text-align：justify更改所有类到text-align：left。

I think the most appropriate solution would be to modify the styles in webViewDidFinishLoad method. How can I accomplish this using Javascript?

我认为最合适的解决方案是修改webViewDidFinishLoad方法中的样式。如何使用Javascript完成此操作？

Thanks in advance

提前致谢

3 个解决方案

#1

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.

这有效，但我仍然对没有jQuery的更优雅的解决方案感兴趣。

#2

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.

虽然有趣的实验。哦，你不想要jquery。

#3

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..

这个问题很老了，但是，我想我会提供我的答案供参考。不确定这是否对你需要的东西有帮助，但是，这里有一个非jQuery的方式，我过去用它来应用text-align：left给整个身体..

    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];

#1