js来控制、修改CSS伪元素的方法

例如，我的样式表有以下规则，需要把伪元素的content内容进行修改

<style>p:after{content:'after伪元素'}
</style>
<p id="dome">正文内容</p>

一、解决方法

方法一：样式覆盖

<script>
document.onclick=function(){var sty=document.createElement('style');sty.innerText='p:after{content:\'修改一下\'}';document.body.appendChild(sty);
};
</script>

方法二：class名重写

添加一个重写的样式：

p.special:after {content: "修改一下";}

然后在js中这样操作它：

<script>
document.onclick=function(){var p=document.getElementById('dome');p.setAttribute("class","special");
};
</script>

方法三：使用css中attr()

我们可以在css中使用sttr()来读取一个特定的DOM属性，如果你浏览器支持伪元素就会支持css中使用attr()。

<style>
p:after {content: attr(data-after);
}
</style><p id="dome">正文内容</p><script>
var p=document.getElementById('dome');
p.setAttribute("data-after","我是后缀");//初始值
document.onclick=function(){p.setAttribute("data-after","修改一下");
};
</script>

二、:before和:after伪元素的常见用法总结

1. 利用content属性，为元素添加内容修饰：

添加字符串
使用引号包括一段字符串，将会向元素内容中添加字符串。

a:after { content: “after content”; }

使用attr()方法，调用当前元素的属性的值：

a::before { content: url(logo.png); }

使用url()方法，引用多媒体文件：

a::before { content: url(logo.png); }

使用counter()方法，调用计时器：

h:before { counter-increment: chapter; cotent: "Chapter " counter(chapter) ". " }

2.清除浮动

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

3.特效妙用

// CSS代码
a {position: relative;
display: inline-block;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a::before, a::after {
content: "";
transition: all 0.2s;
}
a::before {
left: 0;
}
a::after {
right: 0;
}
a:hover::before, a:hover::after {
position: absolute;
}
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }
// HTML代码
<a href="#">我是个超链接</a>

4.特殊形状的实现

如对话气泡

// CSS代码
.tooltip {position: relative;
display: inline-block;
padding: 5px 10px;
background: #80D4C8;
}
.tooltip:before {content: "";
display: block;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #80D4C8;
}
// HTML代码
<div class="tooltip">I'm a tooltip.</div>

三、我的案例

这么一个需求
话
不
多
说

直
接
上
代
码

<div class="drawerBoxOpen">

methods: {handleClick () {if (this.drawer.isShow) {let sty = document.getElementsByClassName('drawerBoxOpen')[0]sty.setAttribute("class","drawerBox")} else {let sty = document.getElementsByClassName('drawerBox')[0]sty.setAttribute("class","drawerBoxOpen")}this.$emit('handleClick')}}

.drawerBox{position: relative;display:flex;&::before {display: none;}}.drawerBoxOpen{position: relative;display:flex;&::before {position: absolute;left: 0;display: block;content: '';width: 100%;height: 6px;top: -6px;background-image: url("~@/assets/img/drawer-top.png");background-size: 100% 100%;}}

js来控制、修改CSS伪元素的方法相关推荐

如何修改css伪元素的样式
首先说一下变成思想,众所周知,css伪元素是不可以修改的,首先你查找他的元素就很困难,不知道怎么查找的可以看一下我的另一篇原生js查看css伪元素属性,那么我们应该怎么修改呢 . 其实换一种思维事情就 ...
jQuery修改CSS伪元素属性
CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们. 假设有如下HTML代码: <div class="techbrood" id=&qu ...
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
细数CSS伪元素及其用法
引言 CSS中有两个很常见的概念,伪类和伪元素. 伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中, ...
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...
CSS伪元素的基本使用
CSS伪元素的基本使用上一篇文章介绍了很多个伪类的使用,这篇来说一下伪元素. 伪元素之所以称为"伪",主要是因为它不是真正网页里的元素,但是标线行为又跟真正网页元素一样,也可以对 ...