Javascript 使用 JQuery 更改 :before css 选择器的宽度属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10061414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing width property of a :before css selector using JQuery
提问by RYN
I have a page that has an image in it and I styled it using :before CSS selectors.
The image is dynamic so it hasn't a fixed width; So I need to set :before rule's width dynamically.
I want do it in client side using JQuery.
Assume this:
我有一个页面，其中有一个图像，我使用 :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;
}
How Can I only change the width property of class with :beforeselector (and not one without it) using JQuery?
如何:before使用 JQuery仅更改带有选择器（而不是没有它的选择器）的类的宽度属性？
回答by m90
I don't think there's a jQuery-way to directly access the pseudoclass' rules, but you could always append a new styleelement to the document's head like:
我不认为有一种 jQuery 方式可以直接访问伪类的规则，但是您始终可以将一个新style元素附加到文档的头部，例如：
$('head').append('<style>.column:before{width:800px !important;}</style>');
See a live demo here
I also remember having seen a plugin that tackles this issue once but I couldn't find it on first googling unfortunately.
我还记得曾经看过一个解决这个问题的插件，但不幸的是我在第一次谷歌搜索时找不到它。
回答by alex
Pseudo elements are part of the shadow DOM and can not be modified (but canhave their values queried).
伪元素是 shadow DOM 的一部分，不能修改（但可以查询它们的值）。
However, sometimes you can get around that by using classes, for example.
但是，有时您可以通过使用类来解决这个问题，例如。
jQuery
jQuery
$('#element').addClass('some-class');
CSS
CSS
.some-class:before {
/* change your properties here */
}
This may not be suitable for your query, but it does demonstrate you can achieve this pattern sometimes.
这可能不适合您的查询，但它确实证明您有时可以实现此模式。
To get a pseudo element's value, try some code like...
要获取伪元素的值，请尝试一些代码，例如...
var pseudoElementContent = window.getComputedStyle($('#element')[0], ':before')
.getPropertyValue('content')
回答by Starx
Pseudo-elements are not part of the DOM, so they can't be manipulated using jQuery or Javascript.
伪元素不是 DOM 的一部分，因此无法使用 jQuery 或 Javascript 操作它们。
But as pointed out in the accepted answer, you can use the JS to append a style block which ends of styling the pseudo-elements.
但是正如已接受的答案中所指出的那样，您可以使用 JS 附加一个样式块，该样式块以伪元素的样式结束。
回答by yckart
The answer should be Jain. You can not select an element via pseudo-selector, but you can add a new rule to your stylesheet with insertRule.
答案应该是耆那教。您不能通过伪选择器选择元素，但您可以使用insertRule.
I made something that should work for you:
我做了一些应该对你有用的东西：
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/
http://fiddle.jshell.net/MDyxg/1/
To be super-cool (and to answer the question really) I rolled it out again and wrapped this in a jQuery-plugin (however, jquery is still not required!):
为了超级酷（并真正回答问题），我再次推出它并将其包装在 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, "-").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));
The usage is quite simple:
用法很简单：
$("body:after").addRule({
content: "foo",
color: "red",
fontSize: "32px"
});
// or without jquery
addRule("body:after", {
content: "foo",
color: "red",
fontSize: "32px"
});
回答by Selfish
One option is to use an attribute on the image, and modify that using jQuery. Then take that value in CSS:
一种选择是在图像上使用一个属性，并使用 jQuery 修改它。然后在 CSS 中获取该值：
HTML (note I'm assuming .cloumnis a divbut it could be anything):
HTML（注意我假设.cloumn是一个div但它可以是任何东西）：
<div class="column" bf-width=100 >
<img src="..." />
</div>
jQuery:
jQuery：
// General use:
$('.column').attr('bf-width', 100);
// With your image, along the lines of:
$('.column').attr('bf-width', $('img').width());
And then in order to use that value in CSS:
然后为了在 CSS 中使用该值：
.column:before {
content: attr(data-content) 'px';
/* ... */
}
This will grab the attribute value from .column, and apply it on the before.
这将从 中获取属性值.column，并将其应用于之前。
Sources: CSS attr(note the exampleswith before), jQuery attr.
来源：CSS attr（注意前面的例子），jQuery attr。
回答by Alexander Shutau
You may try to inherit property from the base class:
您可以尝试从基类继承属性：
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>回答by Dean_Wilson
As Boltclock states in his answer to Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
正如 Boltclock 在他对Selecting and manipulating CSS 伪元素（例如 ::before 和 ::after using jQuery）的回答中所述
Although they are rendered by browsers through CSS as if they were like other real DOM elements, pseudo-elements themselves are not part of the DOM, and thus you can't select and manipulate them with jQuery.
虽然它们通过 CSS 被浏览器渲染，就好像它们就像其他真正的 DOM 元素一样，但伪元素本身并不是 DOM 的一部分，因此你不能用 jQuery 来选择和操作它们。
Might just be best to set the style with jQuery instead of using the pseudo CSS selector.
最好使用 jQuery 而不是使用伪 CSS 选择器来设置样式。
