用js实现before和after伪类的样式修改

xtxc 2019-04-29 09:55:33

<btn></btn>标签在样式里添加了bth:before{content:"a"}

现在如何用JS将content:"a"里的a变成b

...全文

804 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2019-04-29

打赏
举报

回复

遍历document.styleSheets对象。从样式表中找到bth:before进行修改。

本文介绍了使用javascript,jQuery实现修改before,after伪类的样式，分享给大家，具体如下：最近遇到一个需要改变:before,:after 伪类的样式，发现css中并不能直接选择某一个元素的:before和:after伪类元素，所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。类如如下的html及样式 Hello,are you kain? css样式 .red:before { content: 'red', background-color : red }

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

Hi, this is a plain-old, sad-looking paragraph tag.

CSS .red::before { content: 'red'; color: red; } 方法一使用JavaScript或者jQuery切换

元素的类名，修改样式。 .green::before { content: 'gree

Jquery 入门第二季介绍.mp4复习Jquery 入门第1季内容.mp4用append prepend after before添加 .mp4用remove empty删除元素【注意对比英文文档】 .mp4获取并设置 CSS 类.mp4用css()获取和设置属性.mp4width height 多个处理尺寸的重要方法.mp4遍历traversing 查找元素的祖先.mp4遍历查找后代 children和find.mp4遍历查找同胞siblings 兄弟姐妹 .mp4遍历过滤filter 缩小搜索范围.mp4ajax 简介.mp4jQuery AJAX 加载 load().mp4jQuery AJAX 加载用 ajax().mp4jQuery - AJAX get() 和 post() 方法.mp4jQuery ajax - serialize() 方法.mp4jQuery 入门第二季总结.mp4

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。前面的话　　　无法直接给before和after伪元素设置js效果　例子说明　　现在需要为(id为box,内容为”我是测试内容”的div)添加(:before内容为”前缀”，颜色为红色的伪类) <!DOCTYPE html> <html lang=en> <head> 　　<meta charset=UTF-8> 　　<title>Document</title> </hea

纯CSS3实现精美的丝带样式特效是一款分别使用before和after伪元素来制作各种丝带，适用于要使用丝带效果的各种不同场景。

87,904

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章