Changer le modèle de classe CSS en utilisant JavaScript

Question

Est-il possible de changer un modèle de classe CSS en utilisant JavaScript?

Code Pseudo:

function updateClass(className, newData) { 
    cssInterface.alterClass(className, newData); 
} 

className étant le nom de la classe, qui est censé être changé (comme « .footer ») et newData étant le nouveau contenu de la classe (comme frontière: « 1px solide rose "). La cible est, en fait, juste pour économiser de l'espace: Je travaille avec des animations CSS3, donc changer un attribut d'un élément, qui est affecté par sa classe, terminera l'animation de celui-ci - Le cas) la taille de la police ne changera plus. Utiliser différentes classes nécessitera un nouvel ensemble de classes pour tous les éléments affectés, je voudrais éviter cela.

Je ne suis pas la recherche d'un changement par

element.className = "foo"; 

ou

element.style.fontSize = "15pt"; 

Merci pour votre aide, les gars :)

Answer 1

Voir ma réponse here. Pour répondre à votre question: Oui, c'est possible.

@ CSS3: J'ai essayé exactement la même chose dans une de mes expériences html5. J'ai créé un élément <style> supplémentaire, et a changé son contentText pour les définitions de classe CSS dont j'avais besoin. Bien sûr changer l'objet cssRule serait beaucoup plus propre :-)

Answer 2

Vous devriez jeter un oeil à dojo, il a quelques fonctionnalités intéressantes où vous pouvez faire juste cela ..

require(["dojo/dom-class"], function(domClass){ 
    // Add a class to some node: 
    domClass.add("someNode", "anewClass"); 
}); 

http://dojotoolkit.org/reference-guide/1.7/dojo/addClass.html

Answer 3

Pour autant que je peux dire le modèle objet CSS ne peut pas vous dire facilement si vous avez déjà une règle de style existant pour une classe particulière, mais vous pouvez facilement ajouter une nouvelle règle pour cette classe et il aura préséance sur toute déclaration précédente de ce style.

J'ai trouvé un exemple de creating dynamic stylesheets.

Answer 4

Voici ma fonction pour le faire ...

function changeCSS(typeAndClass, newRule, newValue)  // modify the site CSS (if requred during scaling for smaller screen sizes) 
{ 
    var thisCSS=document.styleSheets[0]         // get the CSS for the site as an array 
    var ruleSearch=thisCSS.cssRules? thisCSS.cssRules: thisCSS.rules // work out if the browser uses cssRules or not 
    for (i=0; i<ruleSearch.length; i++)         // for every element in the CSS array 
    { 
     if(ruleSearch[i].selectorText==typeAndClass)     // find the element that matches the type and class we are looking for 
     { 
      var target=ruleSearch[i]         // create a variable to hold the specific CSS element 
      var typeExists = 1; 
      break;              // and stop the loop 
     } 
    } 
    if (typeExists) 
    { 
     target.style[newRule] = newValue;         // modify the desired class (typeAndClass) element (newRule) with its new value (newValue). 
    } 
    else 
    { 
     alert(typeAndClass + " does not exist."); 
    } 
} 

Appelé avec (exemple)

changeCSS("div.headerfixed","-moz-transform-origin", "100% 0%"); 

espérons que cette aide.