Изменение свойства ширины селектора a:before css с помощью JQuery

У меня есть страница с изображением, и я стилизовал ее, используя: перед селекторами CSS.
Изображение является динамическим, поэтому оно не имеет фиксированной ширины; Поэтому мне нужно установить: перед шириной правила динамически.
Я хочу сделать это на стороне клиента, используя JQuery.
Предположим это:

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

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

Как я могу только изменить свойство ширины класса с :before Селектор (и не один без него) с помощью JQuery?

Источник

7 ответов

Решение

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

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

Смотрите демо здесь

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

Источник

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

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

JQuery

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

CSS

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

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

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

var pseudoElementContent = window.getComputedStyle($('#element')[0], ':before')
  .getPropertyValue('content')
Источник

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

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

Источник

Ответ должен быть джайнским. Вы не можете выбрать элемент с помощью псевдо-селектора, но вы можете добавить новое правило в таблицу стилей с помощью 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://stackru.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

Источник

Один из вариантов - использовать атрибут на изображении и изменить его с помощью 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 (обратите внимание на примеры с ранее), jQuery attr.

Источник

Как утверждает Болтлок в своем ответе на Выбор и манипулирование псевдоэлементами CSS, такими как::before и::after, с использованием jQuery

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

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

Источник

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

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>

Источник
Другие вопросы по тегам