使用 JQuery 改变: before css 选择器的宽度属性

小开

伪元素不是 DOM 的一部分，因此不能使用 jQuery 或 Javascript 操作它们。

但是正如在已接受的答案中指出的那样，您可以使用 JS 附加一个样式块，该样式块将结束对伪元素的样式化。

小开

最佳答案

我不认为有一种 jQuery-way 可以直接访问伪类的规则，但是您总是可以在文档的头部添加一个新的 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')

小开

就像“闪电时钟”在他对 < em > 选择和操作 CSS 伪元素的回答，例如: : before 和: : after using jQuery 里说的那样

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

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

小开

答案应该是 Jain。不能通过伪选择器选择元素，但是可以使用 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-plugin 中(然而，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

小开

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

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 (注意，我假设 .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中获取属性值，并将其应用于 before。

资料来源: CSS 攻击(注意前面的例子) ，JQuery attr 。