此问题在此处已有答案:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)(25个答案)
四年前就关门了。
我有一个页面,其中有一个图像,我用样式:在CSS选择器之前。
图像是动态的,因此它没有固定的宽度;所以我需要动态地设置:before rule的宽度。
我想在客户端使用JQuery来完成。
假设如下:
.column:before{
width: 300px;
float: left;
content: "";
height: 430px;
}
.column{
width: 500px;
float: right;
padding: 5px;
overflow: hidden;
text-align: justify;
}
如何使用JQuery只更改带有:before
选择器的类的width属性(而不是没有选择器的类)?
7条答案
按热度按时间sy5wg1nm1#
我不认为有一种jQuery方式可以直接访问伪类的规则,但是您可以在文档的头部添加一个新的
style
元素,如下所示:请参阅**live demo here**
我还记得曾经看到过一个插件,处理这个问题一次,但我无法找到它的第一谷歌不幸。
dzhpxtsq2#
伪元素是影子DOM的一部分,不能修改(但 * 可以 * 查询它们的值)。
但是,有时候可以通过使用类来解决这个问题。
查询
CSS
这可能不适合您的查询,但它确实证明了您有时可以实现这种模式。
要获取伪元素的值,请尝试以下代码...
xdyibdwo3#
伪元素不是DOM的一部分,因此不能使用jQuery或Javascript对其进行操作。
但是正如在已接受的答案中指出的,您可以使用JS附加一个样式块,该样式块结束对伪元素的样式化。
uidvcgyl4#
答案应该是 Jain。您不能通过伪选择器选择元素,但可以使用
insertRule
向样式表添加新规则。我做了一个对你有用的东西:
http://fiddle.jshell.net/MDyxg/1/
为了更酷(也为了回答这个问题 * 真的 *),我再次推出了它,并将其 Package 在一个jQuery-plugin中(然而,jquery仍然不是必需的!):
用法很简单:
https://gist.github.com/yckart/5563717
dphi5xsq5#
一种方法是在图像上使用一个属性,然后使用jQuery修改它,然后在CSS中使用该值:
HTML(注意,我假设
.column
是div
,但它可以是任何内容):查询:
然后为了在CSS中使用该值:
这将从
.column
中获取属性值,并将其应用于之前的。jecbmhm36#
您可以尝试从基底类别继承属性:
第一个
s8vozzvw7#
如his answer to Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery中的螺栓时钟状态
虽然浏览器通过CSS呈现它们,就像它们是其他真实的的DOM元素一样,但是伪元素本身并不是DOM的一部分,因此您不能使用jQuery选择和操作它们。
可能最好使用jQuery设置样式,而不是使用伪CSS选择器。