探讨:关于JS控制伪元素的问题

很多学过C3的小伙伴会知道这么一个东西,叫做:伪元素。
伪元素是一个非常有用的东西,它可以摆脱html的束缚,直接在原有的html内容前后添加元素,大概是以下这么个意思:


1476081452658300.png

通过C3直接添加before和after伪元素后,可以出现如下情况:


1476081579107932.png

好的,这样一来就有了两个新盒子。但其实往深想一步,你就会开始思考一个问题,我如何通过JS来控制这两个伪元素呢?很多初学者都认为这是不可控制的,但事实上,凡事都会有解决办法的,来看看如下操作:
1476082414871866.png

这样是否能够生效呢?我们看一下:
1476082515100418.png

果然有效!不过...事实上,你写完上面的步骤,自己都会觉得很傻,因为同样的效果,我只需要通过CSS就可以写了,请看如下:


1476083153605500.png

然后看看结果:
1476083211913607.png

对吧?所以JS控制伪元素虽然可行,但还不如CSS3直接修改来得快!何必多绕一大圈呢?

然而,我发现网上会有很多技术贴,告诉你如何通过JS控制伪元素,说到底都是给div添加类名或id名,然后通过以上类似的方法来修改属性。因此,建议大家直接通过CSS的层叠性质来修改就足够了!
一个人的知识量是有限的,假如你有更好、更简易的方法来实现JS控制伪元素,那么欢迎在下方吐槽评论+技术分享,让其他小伙伴也涨涨姿势哟!

来源:
http://bbs.520it.com/forum.php?mod=viewthread&tid=2491

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,412评论 1 62
  • 一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获...
    流动码文阅读 15,384评论 0 7
  • 昨天围绕娃写作文的问题,发了一个朋友圈,没想到引起很多的家长朋友们的评论。 或许是家长们太焦虑,还是现在的娃太难教...
    藕礼君_莲藕阅读 402评论 0 0
  • 我是日记星球239号星宝宝,来自深圳的叶子。我相信日积月累的力量,积跬步以致千里!这是第152篇日记。 今天是九九...
    水晶妈咪阅读 216评论 0 0