jquery 动态设置css::before不生效
时间: 2023-08-06 07:03:57 浏览: 127
在使用 jQuery 设置 CSS `::before` 伪元素样式时,需要使用 `content` 属性来设置要添加的内容,并且需要使用 `:before` 选择器来选中伪元素,如下所示:
```javascript
$('#element:before').css('content', '要添加的内容');
```
例如,要在元素 `#element` 的前面添加一个带有文本的圆点,可以使用以下代码:
```javascript
$('#element').css({
'position': 'relative',
'padding-left': '10px'
}).before('<span class="dot"></span>');
$('.dot:before').css({
'position': 'absolute',
'top': 0,
'left': 0,
'width': '5px',
'height': '5px',
'border-radius': '50%',
'background-color': 'red',
'content': '" "'
});
```
以上代码设置了元素 `#element` 的样式,并在其前面添加了一个带有红色圆点的 `::before` 伪元素。注意,`content` 属性的值必须用双引号包裹起来,并且内容需要用空格隔开。另外,`::before` 选择器在 jQuery 中需要使用 `:` 表示。
相关问题
jquery 动态设置css before不生效
在使用 jQuery 设置 CSS `::before` 伪元素样式时,需要使用 `content` 属性来设置要添加的内容,如下所示:
```javascript
$('#element').css('content', '要添加的内容');
```
例如,要在元素 `#element` 的前面添加一个带有文本的圆点,可以使用以下代码:
```javascript
$('#element').css({
'position': 'relative',
'padding-left': '10px'
}).before('<span class="dot"></span>');
$('.dot').css({
'position': 'absolute',
'top': 0,
'left': 0,
'width': '5px',
'height': '5px',
'border-radius': '50%',
'background-color': 'red',
'content': '" "'
});
```
以上代码设置了元素 `#element` 的样式,并在其前面添加了一个带有红色圆点的 `::before` 伪元素。注意,`content` 属性的值必须用双引号包裹起来,并且内容需要用空格隔开。
jquery 动态修改::before属性
要动态修改CSS伪元素(::before或::after)的样式,可以使用jQuery的css()方法,但需要注意以下几点:
1. 伪元素的样式无法直接通过css()方法修改,需要通过添加或移除样式类来实现。
2. 伪元素的样式需要使用content属性来设置。
以下是一个示例代码,假设我们需要将一个元素的伪元素的背景色改为红色:
HTML代码:
```html
<div id="myDiv">Hello World</div>
```
CSS代码:
```css
#myDiv::before {
content: "";
width: 20px;
height: 20px;
background-color: blue;
}
```
jQuery代码:
```javascript
$("#myDiv").addClass("red-before");
// 添加一个样式类,用于设置伪元素的样式
.red-before::before {
background-color: red !important;
}
```
在上面的代码中,我们首先使用addClass()方法给元素添加了一个名为"red-before"的样式类,在这个样式类中,我们使用!important关键字来强制覆盖原有的背景色设置,以确保伪元素的背景色被修改为红色。