我有一个包含图像的页面，我使用 :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;
}
如何:before使用 JQuery 仅更改具有选择器的类的宽度属性（而不是没有它的类）？
我认为没有直接访问伪类规则的 jQuery 方式，但您始终可以将新style元素附加到文档的头部，例如：
$('head').append('<style>.column:before{width:800px !important;}</style>');
在此处查看现场演示
我还记得曾经看过一个解决这个问题的插件，但不幸的是我在第一次谷歌搜索时找不到它。
伪元素是影子 DOM 的一部分，不能修改（但可以查询它们的值）。
但是，有时您可以通过使用类来解决这个问题。
$('#element').addClass('some-class');
.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://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"
});
您可以尝试从基类继承属性：
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>一种选择是在图像上使用属性，并使用 jQuery 对其进行修改。然后在 CSS 中取该值：
HTML（注意我假设.cloumn是 adiv但它可以是任何东西）：
<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。
正如 Boltclock 在他对使用 jQuery 选择和操作 CSS 伪元素（例如 ::before 和 ::after ）的回答中所说的那样
尽管它们由浏览器通过 CSS 呈现，就好像它们就像其他真实的 DOM 元素一样，但伪元素本身并不是 DOM 的一部分，因此您无法使用 jQuery 选择和操作它们。
最好用 jQuery 设置样式，而不是使用伪 CSS 选择器。