Question

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

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

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

提前致谢

Answer 1

像这样解决：

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';
        }
    }
}

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

Answer 2

这是一种可怕的方式，我实际上不会使用自己，因为它为每个元素添加了内联样式。如果不指定你希望它采取行动的类或元素，我就无法想到任何其他方式。

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

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

Answer 3

这个问题很老了，但是，我想我会提供我的答案供你参考。不确定这是否对你需要的东西有帮助，但是，这里有一个非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];

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

3 个答案: