使用 JQuery 更改 :before css 选择器的宽度属性 [重复]答案

【问题标题】：Changing width property of a :before css selector using JQuery [duplicate]使用 JQuery 更改 :before css 选择器的宽度属性 [重复]
【发布时间】：2012-04-21 03:06:59
【问题描述】：

我有一个包含图像的页面，我使用 :before CSS 选择器对其进行了样式设置。
图像是动态的，因此它没有固定的宽度；所以我需要动态设置 :before 规则的宽度。
我想在客户端使用 JQuery。
假设：

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

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

我如何才能使用 JQuery 仅更改带有 :before 选择器（而不是没有它的选择器）的类的宽度属性？

【问题讨论】：

stackoverflow.com/questions/5041494/…
你能告诉我们你想要达到的效果吗？可能有更好的方法来做你正在做的事情。
不是重复的@temani-afif
@PHPWorm... 它怎么不是重复的？
@TemaniAfif 在重复的问题中，它显示了如何更改内容，而不是 ::after 或 ::before 的宽度，并且除了这个之后和之前的宽度不能被答案改变在那个问题中给出

标签： javascript jquery css

【解决方案1】：

我认为没有直接访问伪类规则的 jQuery 方式，但您始终可以将新的 style 元素附加到文档的头部，例如：

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

查看live demo here

我还记得曾经看过一个解决这个问题的插件，但不幸的是我在第一次谷歌搜索时找不到它。

【讨论】：

值得注意的一点是，尽管您的示例使用“one”，因此不会出现多个 <style> 标签，但如果您这样做，您需要自己清理每页多次或需要切换状态。 jsfiddle.net/xK6k4/2 是如何“清理”的示例实现。
这是一种为每个迭代赋予其自己的类的方法：jsfiddle.net/TB824
这是我根据这个答案所做的：jsfiddle.net/p1yc5bsw 通过使用 text() 方法，您可以重复使用相同的元素，而不会每次都破坏它。
这部分谢谢你（因为这个解决方案很聪明），但我也想明确地向任何希望<style> 标签可以有类的人说清楚。我从来没有想到过。
只想备注。也使用了append，但没有使用!important。在 FF 中工作，但在 Chrome、Edge 中没有工作。所以千万不要忘记使用!important

【解决方案2】：

伪元素是shadow 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 附加一个样式块，该样式块结束了对伪元素的样式设置。

【讨论】：

我没有投票，但是可以从 JS 中对元素进行样式设置，以创建更适用的样式规则（根据公认的答案），并且样式肯定是一种操作形式...
@nnnnnn 好的，但它不是自己进行操作，而是通过添加浏览器读取的样式规则来进行操作，从而进行操作。不过奇怪的漏洞。但我同意造型是一种操纵形式。

【解决方案4】：

答案应该是耆那教。您不能通过伪选择器选择元素，但您可以使用 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

【讨论】：

非常酷。我 tweaked it 有点让它为我工作，但它似乎在 Firefox 中不起作用。
@CorySimmons 看起来很棒，我已经在我的要点中添加了评论:)
把它变成一个回购，我会和你一起工作。现在它在 FF 或旧 IE 中不起作用，但可以修复。
这可能会在某些浏览器中引发跨域安全问题。 sheet.cssRules例如在 Chrome 中将是 null。
它有效。但是选择正确的样式表索引很重要。我用console.log(document.styleSheets); 找到了 nedded

【解决方案5】：

您可以尝试从基类继承属性：

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%;
}

&lt;div id="box" class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案6】：

一种选择是在图像上使用属性，并使用 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。

【讨论】：

这听起来很不错，但对我不起作用。您提到的 MDN 参考 sais “attr() 函数可以与任何 CSS 属性一起使用，但对内容以外的属性的支持是实验性的。”

【解决方案7】：

正如 Boltclock 在 his answer to Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery 中所说的

虽然它们是由浏览器通过 CSS 呈现的，就好像它们就像其他真实的 DOM 元素一样，但伪元素本身并不是 DOM 的一部分，因此您无法使用 jQuery 选择和操作它们。

最好用 jQuery 设置样式，而不是使用伪 CSS 选择器。

【讨论】：