Изменение свойства width: перед селектором css с использованием JQuery

Ответ 1

Я не думаю, что есть jQuery-способ прямого доступа к правилам псевдокласса, но вы всегда можете добавить новый элемент style в голову документа, например:

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

Смотрите демо-версию здесь

Я также помню, что видел плагин, который решает эту проблему один раз, но я не смог найти его при первом запуске Google.

Ответ 2

Псевдоэлементы являются частью теневого DOM и не могут быть изменены (но могут быть запрошены их значения).

Однако иногда вы можете обойти это, используя классы, например.

JQuery

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

CSS

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

Это может оказаться неприемлемым для вашего запроса, но он показывает, что вы можете иногда достигать этого шаблона.

Чтобы получить значение псевдоэлемента, попробуйте использовать некоторый код...

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

Ответ 3

Псевдоэлементы не являются частью DOM, поэтому их нельзя манипулировать с помощью jQuery или Javascript.

Но, как указано в принятом ответе, вы можете использовать JS для добавления блока стиля, который заканчивает стилизацию псевдоэлементов.

Ответ 4

Ответ должен быть Jain. Вы не можете выбрать элемент с помощью псевдоселектора, но вы можете добавить новое правило в таблицу стилей с помощью insertRule.

Я сделал что-то, что должно сработать для вас:

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/

Чтобы быть супер-крутым (и на самом деле ответить на вопрос), я снова свернул его и завернул в jQuery-плагин (однако jquery по-прежнему не требуется!):

/*!
 * 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));

Использование довольно просто:

$("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

Ответ 5

"Хотя они отображаются браузерами через CSS, как если бы они были похожими на другие реальные элементы DOM, сами псевдоэлементы не являются частью DOM, и поэтому вы не можете выбирать и манипулировать ими с помощью jQuery". (Выбор и использование псевдоэлементов CSS, таких как:: before и:: после использования jQuery)

Лучше всего установить стиль с помощью jQuery, а не с помощью селектора псевдоселекса.

Ответ 6

Вы можете попытаться наследовать свойство из базового класса:

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>

Ответ 7

Один из вариантов - использовать атрибут на изображении и изменить его с помощью jQuery. Затем возьмите это значение в CSS:

HTML (примечание Я предполагаю, что .cloumn - это div, но это может быть что угодно):

<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());

И затем, чтобы использовать это значение в CSS:

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

Это будет захватывать значение атрибута от .column и применять его к предыдущему.

Источники: CSS attr (обратите внимание на examples с ранее), jQuery attr.