web-dev-qa-db-fra.com

Modification de la propriété width d'un sélecteur before: css à l'aide de JQuery

J'ai une page qui contient une image et je l'ai stylée avec: avant les sélecteurs CSS.
L'image est dynamique et n'a donc pas de largeur fixe; Il me faut donc définir: avant la largeur de la règle de manière dynamique.
Je veux le faire côté client en utilisant JQuery.
Supposons ceci:

.column:before{
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column{
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

Comment puis-je changer la propriété width de la classe avec :before sélecteur (et pas un sans lui) avec JQuery?

javascriptjquerycss
62
RYN

Je ne pense pas qu'il existe un moyen jQuery d'accéder directement aux règles de la pseudoclasse, mais vous pouvez toujours ajouter un nouvel élément style à la tête du document, comme:

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

Voir un démonstration en direct ici

Je me souviens aussi d'avoir vu un plugin s'attaquer à ce problème une fois, mais je ne pouvais malheureusement pas le trouver lors de la première recherche sur Google.

78
m90

Les pseudo-éléments font partie du DOM fantôme et ne peuvent pas être modifiés (mais peut ont leurs valeurs interrogées).

Cependant, vous pouvez parfois 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 montre que vous pouvez parfois atteindre ce modèle.

Pour obtenir la valeur d'un pseudo-élément, essayez un code tel que ...

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

Les pseudo-éléments ne font pas partie du DOM et ne peuvent donc pas être manipulés avec jQuery ou Javascript.

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

23
Starx

La réponse devrait être Jain . Vous ne pouvez pas sélectionner un élément via un 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 roulé à nouveau et l'ai emballé dans un plugin jQuery (cependant, jquery est toujours non requis!):

/*!
 * 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(/([A-Z])/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

20
yckart

Vous pouvez essayer d'hériter une propriété 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>
3
Alexander Shutau

Comme Boltclock l'indique dans sa réponse à ). Sélection et manipulation de pseudo-éléments CSS tels que :: before et :: after utilisant jQuery

Bien qu'ils soient rendus par les navigateurs via CSS comme s'ils ressemblaient à d'autres éléments réels du DOM, 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.

Il serait peut-être préférable de définir le style avec jQuery au lieu d'utiliser le pseudo sélecteur CSS.

3
Dean_Wilson

Une option consiste à utiliser un attribut sur l'image et à le modifier à l'aide de jQuery. Alors prenez cette valeur en CSS:

HTML (note je suppose .cloumn est un div mais cela 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 en CSS:

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

Cela va prendre la valeur d'attribut de .column, et l'appliquer sur l'avant.

Sources: CSS attr (notez le exemples avec avant), jQuery attr.

3
Selfish