如何用js改变伪元素样式

通常设置伪元素的样式直接用CSS很方便

.test:after{content:'';display:block;width:100%;height:100%;background:red;
}

可是有时候想用js动态的去改变伪元素的样式，但是js获取不到伪元素，这就很头疼，不过我们可以换个思路来解决这个问题:

方法一：直接给元素追加一个`<style>`标签

$('.test').append('<style>.test:after{display:none}</style>')

但是这种方法比较麻烦，不太推荐，所以还是尽量不要用js去改变伪元素样式，变通一下，将伪元素改为其他标签，再通过js去动态的控制

方法二：直接改变类名

.change:after{content:'';display:none;
}

$('.test').addClass('change').removeClass('test')

这种方法要注意如果把test类名去掉，但是该元素还需要test的一些其他样式，那么在change类名中要增加这些样式

或者不去掉test类名，直接利用优先级把test的某些样式覆盖掉

还有一点要注意：伪元素一定要加上content:'';否则所写的其他样式不起作用

我的`个人博客`有空来坐坐

https://www.wangyanan.online

如何用js改变伪元素样式相关推荐

js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
登录验证中的判断逻辑 1.提示输入用户,输入8 - 16位密码2.检验输入用户名和密码是否正确用户名不允许空格,任何字符数字都行,不允许为空密码8-16位,不允许空格 ,小于8位给出提示密码必须 ...
在css样式中隐藏元素,用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
JavaScript文档对象模型document对象改变Html元素样式属性(5)
1. document对象改变Html元素样式属性行内样式操作案例如下: <!DOCTYPE html> <html><head><meta charset ...
使用js获取伪元素的content
在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素下面是部分代码 //使用js获取伪元素的content Str ...
【JQ】jQuery改变css伪元素样式
伪元素是什么?例如 :bofore.:after 伪元素不是dom,不能直接操作. 若有以下html和css,通过操作伪元素改变图标颜色: <div class = "table-co ...
html添加样式js,前端-JS设置html元素样式
在前面的[<前端-获取或者修改div内容>]和[<前端-JavaScript获取和设置input的值>]中,我们说的都是改变内容了,这篇博客我们来说一下设置html元素的样式. ...
vue移除伪元素_获取伪元素的属性和改变伪元素的属性
获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象.然后利用getPropertyValue方法或直接使用键值访问都可 ...
css hover, focus 状态改变其他元素样式
A:hover { 改变 B 的样式 }, 这样效果就不需要用到javascript. 这个就是css选择器的使用情况了,假设悬浮元素是a,样式改变元素是b,俩个元素之间的关系就是b是a的子元素就可以 ...

如何用js改变伪元素样式

方法一：直接给元素追加一个`<style>`标签

方法二：直接改变类名

我的`个人博客`有空来坐坐

如何用js改变伪元素样式相关推荐

最新文章

热门文章

如何用js改变伪元素样式

方法一：直接给元素追加一个<style>标签

方法二：直接改变类名

我的个人博客有空来坐坐

如何用js改变伪元素样式相关推荐

最新文章

热门文章

方法一：直接给元素追加一个`<style>`标签

我的`个人博客`有空来坐坐