js动态修改:after:before伪元素content值

最新推荐文章于 2024-04-22 17:40:03 发布
最新推荐文章于 2024-04-22 17:40:03 发布
阅读量6.3k 收藏 11
点赞数 8
分类专栏： 前端 文章标签： css3 html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_LoveJia/article/details/112256396
版权

总览

今天做了一个有关js如何绑定动态修改伪类的content的内容，运用到的有( :before 和 :after 伪元素、CSS content 属性、data-* H5新属性、js)等技术。
基本原理：
1）首先给box盒子添加 [data-content-before=":before"]和[ data-content-after=":after"]属性；
2）其次添加html标签和style样式；
3）在样式里添加box元素的:before伪元素和:after 伪元素；
4）:before伪元素和:after 伪元素里各自添加content属性；
5）content 和 attr 配合使用：
content: attr(data-content-after);和content: attr(data-content-before);
这样content可以获取到box添加data-content-after属性里的值:after（before同理）

6）最后通过js获取到box对象，通过box对象attributes找到添加的 [data-content-before=":before"]和[ data-content-after=":after"]属性的value，有了value值，这就可以进行动态修改 before伪元素和:after 伪元素里的content值； 以此现在做一个笔记以便以后使用，Hope to help you.

废话不多说，直接上代码

一、效果图

二、代码区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js动态修改:after:before伪元素content值</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				padding: 0;
				margin: 0;
			}
			#box{
				width: 200px;
			    height: 200px;
			    position: fixed;
			    top: calc(50% - 100px);
			    left: calc(50% - 100px);
			    background: #0877FF;
			    border-radius: 10px;
			    text-align: center;
			    box-shadow: 1px 2px 3px -1px;
			}
			#box:after{
				content: attr(data-content-after);
			    position: relative;
			    top: -120px;
			    left: -160px;
			    width: 104px;
			    height: 100px;
			    line-height: 100px;
			    text-align: center;
			    border-radius: 10px;
			    background: orange;
			    box-shadow: 1px 2px 3px -1px;
			    display: block;
			}
			#box:before{
				content: attr(data-content-before);
			    position: relative;
			    top: 0;
			    right: -260px;
			    width: 104px;
			    height: 100px;
			    line-height: 100px;
			    text-align: center;
			    border-radius: 10px;
			    background: #39c778;
			    box-shadow: 1px 2px 3px -1px;
			    display: block;
			}
		</style>
	</head>
	<body>
		<div id="box" data-content-before=":before" data-content-after=":after">box盒子</div>
		
		<script type="text/javascript">
			//js用法
			var box = document.getElementById('box');
			
			var boxBeforeVal = box.attributes[1].value;
			var boxAfterVal = box.attributes[2].value;
			
			//console.log(boxBefore);//输出为   :before
			//console.log(boxAfter);//输出为  :after
			
			//下面可以自定义boxBeforeVal和boxAfterVal的值
			box.attributes[1].value = ':before伪元素';
			box.attributes[2].value = ':after伪元素';
		</script>
	</body>
</html>
Mr_LoveJia
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
用js实现before和after伪类的样式修改的示例代码
12-29
本文介绍了使用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 }
js,jq改变cssbefore或after的伪类的样式
dxj124的博客
01-03 4586
当我们把样式绑定在伪元素上，但是需要通过js调整这个伪类的样式的时候，CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。这时候操作的方式如下： html： <p class="red">Hello,are you kain?</p> css样式 .red:before { content: 'red', b...
js动态修改after，before的content内容，以及动态修改单个after，before的属性
最新发布
qq_47956199的博客
04-22 387
修改’--left‘的值就可以改变after内的值了，这个方法就是不适合与多个一样但独立的after，但是用于操控单个after倒是非常好用，因为一个变量只能控制一个属性且不独立，需要独立控制多个after的可以尝试修改style标签，会的可以评论分享一下。关于js动态修改after之类的伪类的content内容可以通过在标签上添加data-内容自填的属性，然后就可以在css中使用attr(data-内容自填)方法进行使用。这个用起来还好，通过动态修改属性的内容就可以改变伪类内content的值了。
js设置before和after伪元素效果的方法总结
热门推荐
sandaray的专栏
09-19 2万+
我们知道，我们无法直接给before和after伪元素设置js效果 例子说明 现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀"，颜色为红色的伪元素) 　　 　　Document 　　我是测试内容 　　 　　　　var oBox = document.getElementById('box'); 　　 解决办法 【方法一】动态
JavaScript前端中的伪类元素before和after使用详解
qq_38334677的博客
02-22 3507
在前端开发中，伪类是一种让你可以选择元素的某个状态或位置的 CSS 选择器。其中，:before和:after伪类允许你在一个元素之前或之后插入内容。:before和:after伪类创建的元素是不在 HTML 文档中的，它们是通过 CSS 生成的。可以用它们来在一个元素的前面或后面插入一些内容，这些内容可以是文本、图像或者其他任何可以用 CSS 生成的内容。伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。
JS 动态获取和修改伪元素 after 和 before 的属性值
总得学点什么的博客
05-14 9474
伪元素大家应该都比较熟悉，before 和 after 更是我们经常用到的，平时我们可以将他们看成是CSS元素，虽然实际上他们并不属于真正的页面元素，HTML里也不会有与之对应的元素，但是伪元素在整体页面中的表现显示和使用方法和其他元素一样，只不过是以CSS样式来展示行为。在开发者工具界面，我们也能发现，像 before 和 after 这些伪元素的内容是不会在 HTML 的代码结构中体现的。 虽然 before 和 after 这类伪元素无法在 HTML 代码结构中体现，但是他的内容的动态获取和..
使用js动态更改:after的值
weixin_30318645的博客
02-24 1051
HTML代码: <div class="after" data-attr="after"></div> CSS代码: .after:after{ content: attr(data-attr); color: #0C68F7; } JS代码: $('.after').attr('data-attr','详情'); 这样一来,就可以动态改...
给before和after伪元素设置js效果的方法
01-19
　无法直接给before和after伪元素设置js效果　 例子说明 　现在需要为(id为box,内容为”我是测试内容”的div)添加(:before内容为”前缀”，颜色为红色的伪类) <!DOCTYPE html> <html lang=en> <head...
给before和after伪元素设置js效果的方法.docx
01-22
给before和after伪元素设置js效果的方法 在CSS中，伪元素（Pseudo-elements）是一种特殊的元素，它允许我们添加额外的元素而不扰乱文档本身。在某些情况下，我们需要给before和after伪元素设置js效果，以实现某些...
详解CSS 伪元素及Content 属性
12-11
 说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个class为.before和.after不是一样...
quasi-excerpt:查询任意 CSS 伪元素的框架
06-20
quasi-excerpt允许您获取应用于伪元素的 CSS 规则（例如 :before 或 :after）。 用法 var quasi = require("quasiExcerpt"); var value = quasi.getPseudoStylePropertyValue(".textWrapper", "before", "content...
js如何控制css伪元素内容（before，after）
weixin_34239169的博客
02-03 521
曾经遇到的问题，在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出。有个疑问如何用js控制它。于是在segmentfault提问，如下是对问题的整理： 如何用js控制css伪类after 简单粗暴的方式： 简单粗暴的方式，直接在html中添加样式覆盖掉之前样式规则 <style> p:after{content:'我是后缀'} </style> <p...
JavaScript事件委托动态修改CSS伪元素:after和:before的样式
Constantiny的博客
04-02 1913
网页的页面如图加了一个伪元素::before实现了遮罩效果但是我想在点击按钮的时候清除掉这个效果呈现本来的图片。
使用js动态修改元素的伪元素before或after
林钹渊的博客
07-17 6590
初始样式代码 <div class="formBox" ref='indentDom' id='indentDom' > </div> .formBox { &:before { content: '*'; position: absolute; left: 7px; font-size: 14px; ...
vue使用 ::after ::before 伪元素 动态改变content内容
weixin_42634991的博客
09-01 7008
<!-- div标签中添加 :data-attr，里边的内容指向 content --> <div :data-attr="content"></div> export default { data() { return { // 可以修改的内容 content:'动态的内容' } } } <style> // 使用attr 绑定对应的data-attr.
JS操作CSS伪元素
qq_25211081的博客
07-11 1990
js控制css伪元素样式, 事件
before和after伪类
weixin_44708992的博客
04-07 184
CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。/* //改叉叉大小 6：1等量放大缩小就行（算好的，省的自己调整太麻烦） */用来创建一个伪元素，作为已选中元素的最后一个子元素。这个虚拟元素默认是行内元素。
js ::after简单实战
wnk1997的博客
11-21 1269
工作中遇到了一个表格，鼠标指到单元格要有个整行编辑态的效果，下面写个简单的demo。::after的作用是在元素后面再加个XXX样式。
js动态修改伪类的content
996程序员的自我修养
12-08 2376
目的：为了在页面中动态改变某个标签的伪类中的content的内容。实际运用场景有，如输入框下方的输入错误提示可以使用伪类的方式实现，又要根据不通的错误提示不同的内容。 主要使用 css中的 attr()方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, .
过JQuery修改伪元素:before,:after的方法
05-25
要修改伪元素的样式，可以使用JQuery的css()方法。但是需要注意的是，伪元素的样式是无法直接修改的，需要通过创建一个新的样式规则来实现。 下面是一个使用JQuery修改伪元素的样例代码： ```javascript // 创建一个新的样式规则 var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '.my-element:before { content: "new content"; }'; document.getElementsByTagName('head')[0].appendChild(style); // 给目标元素添加一个类名 $('.my-element').addClass('my-element'); // 修改伪元素样式 $('.my-element').css('color', 'red'); ``` 上面代码的第一部分创建了一个新的样式规则，将其添加到文档头部。第二部分给目标元素添加了一个类名，这样新的样式规则就会应用到目标元素上。第三部分使用JQuery的css()方法修改伪元素的样式。注意，对于伪元素的样式修改，需要在新的样式规则中定义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值