JavaScript实现修改伪类样式

项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式,但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法

HTML

aragraph tag.

CSS

rush:xhtml;"> .red::before { content: 'red'; color: red; }

方法

使用JavaScript或者jQuery切换

元素的类名,修改样式。

rush:xhtml;"> .green::before { content: 'green'; color: green; } $('p').removeClass('red').addClass('green');

方法

在已存在的').appendTo('head');

方法

使用HTML5的data-属性,在属性中使用attr()动态修改

rush:xhtml;">

aragraph tag.

.red::before { content: attr(data-attr); color: red; } $('.red').attr('data-attr','green');

以上就是我们为大家整理的四种方法,如果大家有更好的方法,可以在下方的留言区讨论。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...