使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

您可以创建一个伪属性，也可以使用一个现有的属性，并在伪元素的样式表中继承它。

似乎它对“content”属性不起作用:(

2014-10-13 13:45:45

你可以使用我的插件来实现这个目的。

JQuery:

应该指定值，就像在jQuery.css的普通函数中一样

此外，你还可以获得pseudo-element参数的值，就像在jQuery.css的普通函数中一样:

console.log( $(element).cssBefore(parameter) );

JS:

GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/

2017-07-31 18:19:08

下面是访问:after和:before样式属性的方法，在css中定义:

// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');

2014-07-15 21:55:01

在jQuery中不能选择伪元素，因为它们不是DOM的一部分。但是你可以在父元素中添加一个特定的类，并在CSS中控制它的伪元素。

例子

jQuery:

<script type="text/javascript">
    $('span').addClass('change');
</script>

在CSS中:

span.change:after { content: 'bar' }

2011-03-17 06:46:46

这是不实际的，因为我没有为现实世界的使用写这篇文章，只是给你一个可以实现的例子。

css = {
before: function(elem,attr){ 

if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
} else {
 $("#cust_style").remove();
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
}

}, after: function(elem,attr){
if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 

} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 
}
}
}

这个当前add's a /或追加一个Style元素，其中包含你的必要属性，这将影响目标元素的伪元素之后。

这可以用作

css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after

and

css.before( ... ); // to affect the before pseudo element.

伪元素不能直接通过DOM访问，目前不可能自由编辑css的具体值。

我的方法只是一个例子，它不适合练习，你可以修改它，尝试一些你自己的技巧，使它适合真实世界的使用。

所以用这个和其他东西做你自己的实验吧!

阿达什·赫格德。

2015-04-20 11:59:54

只需要在之前或之后设置伪样式来继承，然后用javascript设置父样式。

例如，我想改变:before的颜色样式，然后我设置:

.my-style::before{
color: inherit;
}

然后我用javascript改变了.my-style元素的颜色样式:

document.querySelector(".my-style").style.color = red;

工作完成了，超级简单

2021-10-05 14:13:33

使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

推荐文章

最新文章

标签