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




jquery получить селектор (6)

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

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

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

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


Answer #1

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


Answer #2

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

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

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

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


Answer #3

Один из вариантов - использовать атрибут на изображении и изменить его с помощью 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 и применит его к .column .

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


Answer #4

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

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>


Answer #5

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

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

JQuery

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

CSS

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

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

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

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

Answer #6

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

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





css