我有一个页面包含一张图片，我使用: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选择器的类的宽度属性（而不是没有选择器的类）？
我认为没有一种jQuery的方法可以直接访问伪类规则，但是您可以始终将新的style元素附加到文档的头部，例如：
$('head').append('<style>.column:before{width:800px !important;}</style>');
可以在这里查看演示。
我还记得曾经看到过一个插件来解决这个问题，但不幸的是我第一次谷歌搜索时没有找到它。
<style>标签，但如果您需要在页面上多次执行此操作或需要切换状态，则需要在完成后进行清理。http://jsfiddle.net/xK6k4/2/是如何“清理”的示例实现。 - dev_row<style>标签可以有类。这从未发生在我身上。 - crowhillappend，但没有使用!important。在Firefox中可以工作，但在Chrome和Edge中无法工作。所以不要忘记使用!important。 - Andris伪元素是阴影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 https://dev59.com/dmkw5IYBdhLWcg3wNXz2#16507264
*
* 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"
});
sheet.cssRules将为空。 - MichaelKaeserconsole.log(document.styleSheets); 找到需要的那个。 - Vlad .column 是一个 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中获取属性值，并应用于之前。您可以尝试从基类继承属性：
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>正如Boltclock在他对使用jQuery选择和操作CSS伪元素，如::before和::after的回答中所述
虽然浏览器通过CSS将它们呈现为其他真实DOM元素一样，但伪元素本身并不是DOM的一部分，因此您无法使用jQuery选择和操作它们。
最好使用jQuery设置样式而不是使用伪CSS选择器。