Modification de la propriété largeur de a: avant le sélecteur css à l'aide de JQuery

Je ne pense pas qu'il y ait un jQuery-way pour accéder directement aux règles du pseudoclass, mais vous pouvez toujours ajouter un nouvel élément de style à la tête du document comme:

 $('head').append('<style>.column:before{width:800px !important;}</style>'); 

Voir une démonstration en direct ici

Je me souviens aussi avoir vu un plugin qui s'attaque à ce problème une fois, mais je ne pouvais pas le trouver sur le premier google malheureusement.

Les pseudo éléments font partie de l'ombre DOM et ne peuvent pas être modifiés (mais peuvent faire valoir leurs valeurs).

Cependant, parfois, vous pouvez contourner cela en utilisant des classes, par exemple.

JQuery

 $('#element').addClass('some-class'); 

CSS

 .some-class:before { /* change your properties here */ } 

Cela peut ne pas convenir à votre requête, mais cela permet de démontrer que vous pouvez atteindre ce modèle parfois.

Pour obtenir une valeur de pseudo-élément, essayez un code comme …

 var pseudoElementContent = window.getComputedStyle($('#element')[0], ':before') .getPropertyValue('content') 

Les pseudo-éléments ne font pas partie du DOM, de sorte qu'ils ne peuvent pas être manipulés en utilisant jQuery ou Javascript.

Mais comme indiqué dans la réponse acceptée, vous pouvez utiliser le JS pour ajouter un bloc de style qui finit par coiffer les pseudo-éléments.

La réponse devrait être Jain . Vous ne pouvez pas sélectionner un élément via pseudo-sélecteur, mais vous pouvez ajouter une nouvelle règle à votre feuille de style avec insertRule .

J'ai fait quelque chose qui devrait fonctionner pour vous:

 var addRule = function(sheet, selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); }; addRule(document.styleSheets[0], "body:before", "content: 'foo'"); 

http://fiddle.jshell.net/MDyxg/1/

Pour être super cool (et pour répondre à la question vraiment ), je l'ai relancé et l'ai emballé dans un jQuery-plugin (mais jquery n'est toujours pas nécessaire!):

 /*! * jquery.addrule.js 0.0.1 - https://gist.github.com/yckart/5563717/ * Add css-rules to an existing stylesheet. * * @see http://stackoverflow.com/a/16507264/1250044 * * Copyright (c) 2013 Yannick Albert (http://yckart.com) * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). * 2013/05/12 **/ (function ($) { window.addRule = function (selector, styles, sheet) { styles = (function (styles) { if (typeof styles === "string") return styles; var clone = ""; for (var p in styles) { if (styles.hasOwnProperty(p)) { var val = styles[p]; p = p.replace(/([AZ])/g, "-$1").toLowerCase(); // convert to dash-case clone += p + ":" + (p === "content" ? '"' + val + '"' : val) + "; "; } } return clone; }(styles)); sheet = sheet || document.styleSheets[document.styleSheets.length - 1]; if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); else if (sheet.addRule) sheet.addRule(selector, styles); return this; }; if ($) $.fn.addRule = function (styles, sheet) { addRule(this.selector, styles, sheet); return this; }; }(window.jQuery)); 

L'utilisation est assez simple:

 $("body:after").addRule({ content: "foo", color: "red", fontSize: "32px" }); // or without jquery addRule("body:after", { content: "foo", color: "red", fontSize: "32px" }); 

https://gist.github.com/yckart/5563717

"Bien qu'ils soient rendus par les navigateurs via CSS comme s'ils étaient comme d'autres éléments de DOM réels, les pseudo-éléments eux-mêmes ne font pas partie du DOM, et vous ne pouvez donc pas les sélectionner et les manipuler avec jQuery". ( Sélection et manipulation de pseudo-éléments CSS tels que: avant et :: après l'utilisation de jQuery )

Peut-être juste le meilleur pour définir le style avec jQuery au lieu d'utiliser le sélecteur pseudo css.

Vous pouvez essayer d'hériter des propriétés de la classe de base:

 var width = 2; var interval = setInterval(function () { var element = document.getElementById('box'); width += 0.0625; element.style.width = width + 'em'; if (width >= 7) clearInterval(interval); }, 50); 

 .box { /* Set property */ width:4em; height:2em; background-color:#d42; position:relative; } .box:after { /* Inherit property */ width:inherit; content:""; height:1em; background-color:#2b4; position:absolute; top:100%; } 

 <div id="box" class="box"></div> 

Une option est d'utiliser un attribut sur l'image, et de la modifier en utilisant jQuery. Ensuite, prenez cette valeur dans CSS:

HTML (note que je suppose que .cloumn est un div mais ça pourrait être n'importe quoi):

 <div class="column" bf-width=100 > <img src="..." /> </div> 

JQuery:

 // General use: $('.column').attr('bf-width', 100); // With your image, along the lines of: $('.column').attr('bf-width', $('img').width()); 

Et ensuite, pour utiliser cette valeur dans CSS:

 .column:before { content: attr(data-content) 'px'; /* ... */ } 

Cela va prendre la valeur de l'attribut de. .column , et l'appliquer sur le précédent.

Sources: CSS attr (notez les exemples précédents), jQuery attr .