tokeniser pour récupérer des paires propriété-valeur

J’ai des CSS sous forme de chaîne, par exemple

border: solid 1px #0000ff; background-color: #ffff00;

et je veux appliquer ce CSS à un

. Mais tous les exemples d’utilisation de jQuery pour appliquer CSS impliquent l’utilisation de la méthode css , et pour suivre cette route, je devrais scinder la chaîne CSS par un point-virgule ( ; ) afin de récupérer les paires propriété-valeur, puis par ( : pour récupérer la propriété et la valeur, et faire

 $('myDiv').css(property, value);

Est-il possible d’appliquer le CSS directement, à partir de sa forme chaîne?

Je crains qu’une parsing aussi naïve des CSS (points-virgules et deux points) échoue si les valeurs CSS peuvent contenir ces caractères, par exemple dans les sous-valeurs url .

Vous pouvez récupérer l’atsortingbut de style existant style puis en définir un nouveau:

 var target = $("#target"); target.attr("style", target.attr("style") + "; " + yourSsortingng);

Exemple en direct | La source

En supposant qu’aucun style en ligne ne soit défini sur l’élément à l’aide de l’atsortingbut style , les opérations suivantes fonctionneront:

 $("#foo").attr('style', 'border: solid 1px #0000ff; background-color: #ffff00;');

Exemple de violon

Notez que ce n’est pas une solution idéale cependant. Une méthode bien meilleure serait de placer les styles requirejs dans une classe et d’utiliser addClass() .

Commencez par obtenir votre élément div en utilisant un sélecteur:

 var div = document.getElementById("myDiv"); // myDiv is the id right?

Ensuite, obtenez le css actuel:

 var css = div.getAtsortingbute("style");

Si elle est null définissez-la sur le nouveau style. Sinon, ajoutez le nouveau style:

 var style = 'border: solid 1px #0000ff; background-color: #ffff00;'; if (css === null) css = style; else css += style;

Enfin, mettez à jour le style de la div:

 div.setAtsortingbute("style", css);

C’est tout. Voir la démo: http://jsfiddle.net/xUWzw/

Il existe un autre moyen d’append des styles basés sur des chaînes. Si ci-dessous est la chaîne de style –

  border: solid 1px #0000ff; background-color: #ffff00;

ensuite

  var div = document.getElementById('myDiv'); div.style.cssText = 'border: solid 1px #0000ff; background-color: #ffff00;';

Violon: https://jsfiddle.net/eja0zea4/

Vous pouvez append la chaîne css directement à la div dans l’atsortingbut style à l’aide de la fonction jQuery .attr (), mais la meilleure solution consiste à affecter une classe à votre div avec la fonction jQuery .addClass () et d’append les propriétés css à la propriété. classe.

Pourquoi ne pas créer une classe CSS et simplement utiliser la méthode addClass removeClass de jQuery

 .myClass { border: solid 1px #0000ff; background-color: #ffff00; }

puis

 $(div).addClass('myClass');

Utilisez simplement la fonction .attr('style', 'somthing...') jQuery .attr('style', 'somthing...') C’est très facile à utiliser et vous n’avez pas à penser à la tolérance aux fautes.

vous pouvez le récupérer en tant qu’object

 $('myDiv').css({property:"value",property:"value",property:"value"});