使用JQuery更改a：before cssselect器的width属性
我有一个页面，其中有一个图像，我使用CSS样式：CSSselect器。
图像是dynamic的，所以它没有固定的宽度; 所以我需要设置：规则的宽度之前dynamic。
我想在客户端使用JQuery来做到这一点。
假设：
.column:before{ width: 300px; float: left; content: ""; height: 430px; } .column{ width: 500px; float: right; padding: 5px; overflow: hidden; text-align: justify; } 我怎么才能只改变宽度属性的类:beforeselect器（而不是一个没有它）使用JQuery？
我不认为有一个jQuery的方式来直接访问伪类的规则，但你总是可以添加一个新的style元素到文档的头像：
$('head').append('<style>.column:before{width:800px !important;}</style>');
在这里看到一个现场演示
我还记得曾经看到一个解决这个问题的插件，但不幸的是，我不能在第一次search时find它。
伪元素是影子DOM的一部分，不能修改（但可以查询它们的值）。
但是，有时候你可以通过使用类来解决这个问题。
jQuery的
$('#element').addClass('some-class');
CSS
.some-class:before { /* change your properties here */ }
这可能不适合你的查询，但它确实certificate你有时可以实现这种模式。
要获得伪元素的值，请尝试一些代码，如…
var pseudoElementContent = window.getComputedStyle($('#element')[0], ':before') .getPropertyValue('content')
伪元素不是DOM的一部分，所以不能用jQuery或Javascript来操作。
但正如在接受的答案中指出的那样，您可以使用JS添加样式化伪元素结束的样式块。
答案应该是耆那教 。 您不能通过伪select器select一个元素，但可以使用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(/([AZ])/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" });
“虽然浏览器通过CSS呈现它们，就好像它们像其他真正的DOM元素一样，但是伪元素本身并不是DOM的一部分，因此您无法使用jQuery来select和操作它们。 （ 在使用jQuery之后，select和操作CSS伪元素，例如:: before和::）
可能只是最好用jQuery来设置样式，而不是使用伪cssselect器。
您可以尝试从基类inheritance属性：
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>
一种select是在图像上使用一个属性，并使用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 （注意前面的例子 ）， jQuery attr 。
