Modifier le texte à gauche avec javascript pour toutes les classes avec text-align justifier

Question

Il y a du contenu HTML statique que j'ai besoin d'afficher sur un appareil mobile. Ces fichiers ont déjà leurs styles CSS, avec beaucoup de classes.

Pour améliorer la lisibilité sur un petit écran, je veux changer toutes les classes avec text-align: justify to text-align: left.

Je pense que la solution la plus appropriée serait de modifier les styles dans la méthode webViewDidFinishLoad. Comment puis-je accomplir cela en utilisant Javascript?

Merci à l'avance

Answer 1

comme ceci: Solved

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

Cela fonctionne, mais je suis toujours intéressé par des solutions plus élégantes w/o jQuery.

Answer 2

Voici une manière horrible que je n'utiliserais pas moi-même car il ajoute un style en ligne à chaque élément. Je ne vois pas d'autre moyen de le faire sans spécifier les classes ou les éléments sur lesquels vous voulez agir.

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

expérience intéressante cependant. oh et vous ne voulez pas jquery.

Answer 3

Cette question est assez ancienne, mais, pensé que je fournirais ma réponse pour référence. Vous ne savez pas si cela vous aidera, mais voici une méthode non-jQuery que j'ai utilisée dans le passé pour appliquer text-align: left à tout le corps.

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