Mise à jour du contenu de la feuille de style avec .innerText lent

J'ai une feuille de style dont je suis en train de mettre à jour le contenu à la volée, en fonction d'une interface utilisateur. J'ai remarqué que dans Firefox (qui utilise stylesheet.innerHTML) et IE (qui utilise stylesheet.styleSheet.cssText) fonctionne bien.Mise à jour du contenu de la feuille de style avec .innerText lent

Il semble que Chrome et Safari (qui utilisent stylesheet.innerText) soient incroyablement lents sur les feuilles de style plus volumineuses. Quelqu'un at-il rencontré cela et/ou trouvé de meilleures solutions?

EDIT: Il est impossible d'utiliser JS pour changer les styles en ligne depuis l'application et ne rafraichit l'utilisateur peut passer « pages » nuking ainsi les styles en ligne. Aussi, si je veux utiliser l'interface utilisateur pour modifier les liens, je ne peux pas utiliser inline pour modifier les pseudo-classes telles que: hover (pour autant que je sache)

Source

2010-12-07 Dave Stein

Cela a donc été ma fonction de mise à jour des feuilles de style pour l'année écoulée:

function(style, style_value) { 

    if ('cssText' in style.styleSheet) { 

    // without this line, IE WILL crash, if no stylesheet settings were set 
    if (typeof(style_value) != 'string' || !style_value.length) { 
     return; 
    } 
    style.styleSheet.cssText = style_value; 

    } 
    else { 
    style.innerHTML = style_value; 
    } 

}

Source

2010-12-08 15:22:12

Il est logique que la reparfaçage CSS et le refournissement du document puissent être lent. Je suggère d'inclure toutes les règles dont vous pourriez avoir besoin, mais "espacez-les" avec une classe sur l'élément <html>, puis modifiez les règles actives en ajoutant et supprimant des classes plutôt qu'en utilisant cssText/innerText.

CSS:

.foo h1 { color: green } 
.bar h1 { color: red }

JavaScript:

document.documentElement.className = new Date().getHours() >= 12 ? 'foo' : 'bar';

Cela écraserait tout autre élément noms de classe sur le <html> donc plus prudent d'analyse syntaxique ou des classes BASCULEMENT via jQuery (ou équivalent) serait généralement approprié .

Si votre code JavaScript sait quelles règles CSS doivent être modifiées, vous pouvez également modifier les règles de style à la volée. En pratique, ceci est similaire à la modification de n'importe quel style d'éléments, c'est-à-dire myElement.style.color = 'green'; Le programme Web d'Opera a un good explanation of modifying CSS via JavaScript.

Exemple de méthode multi-navigateur pour modifier une règle unique:

var modifyStyleRule; 

(function(doc){ 
    var sheets = doc.styleSheets, 
     rules = 'cssRules'; 
    rules = sheets[0][rules] ? rules : 'rules'; 

    modifyStyleRule = function (sheetIndex, ruleIndex, propertyValues) { 
     var style = sheets[sheetIndex][rules][ruleIndex].style, 
      prop; 

     for (prop in propertyValues) { 
      if (propertyValues.hasOwnProperty(prop)) { 
       style[prop] = propertyValues[prop]; 
      } 
     } 
    }; 
})(document);

Exemple d'utilisation: modifyStyleRule(0, 0, {color: 'red'});.

Notez que selon le type et la quantité de modifications que vous apportez avec ce (couleurs vs taille/position), cela pourrait très facilement être plus lent quesheet.innerHTML ou équivalent. Cette technique est utile de temps en temps et lorsqu'elle est combinée avec des «espaces de noms de style» et l'échange de noms de classe, de grands changements peuvent encore être performants.

Source

2010-12-08 00:04:48

En utilisant plus de classes I Je pourrais m'en tirer avec la plupart des options - comme changer une classe pour gras vs non gras ou italique ou pas ... mais je ne sais pas si je pourrais l'adapter pour changer les couleurs RVB. J'ai édité ci-dessus pour répondre à toute autre future affiche pour savoir pourquoi el.style n'est pas utilisable dans ce cas. –

Je ne suggérais pas el.style pour votre question en modifiant plutôt les règles de css "globales". Il y a des exemples dans ce lien d'Opera mais un exemple non IE rapide et sale serait 'document.styleSheets [0] .rules [0] .style.color = 'blue';' qui pourrait changer le 'global' 'a: couleur visitée (si c'est la feuille de style et la règle bien sûr). –

Juste vérifié l'article sur les autres méthodes d'édition en dehors de style.rule. Je ne vois pas la façon .rules et j'ai essayé dans Chrome sans chance. Désolé si je manque quelque chose après une longue journée. Je regarde insertRule et ces méthodes dans l'article maintenant ... ils fonctionnent bien mais je ne peux pas sembler obtenir les informations modifiées de innerText. Ce problème est secondaire, mais j'aimerais pouvoir sauvegarder la feuille CSS après la modification pour une utilisation ultérieure. –

Si vous voulez rendre le navigateur Indépendant ce code:

var field = document.getElementById(id); // where u want to use innertext 

if(field != null) 
{   
    if(navigator.appName == "Netscape") // appName for both FireFox and Chrome its is "Netscape" i checked it with different version. 
     field.textContent = value; 
    else // for For IE v 8 i checked .textContent is not supported by IE for me it was not working. 
     field.innerText = value;  
}

Source

2012-01-02 12:10:11 ifti

Depuis que j'utilise jQuery, il n'est pas nécessaire d'utiliser le navigateur. Ils manipulent ce peu pour moi. –

Mise à jour du contenu de la feuille de style avec .innerText lent

Répondre

Questions connexes