JavaScript获取伪元素(Pseudo-Element)属性的方法技巧


Posted in Javascript onMarch 13, 2015

CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素。以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的:

.element:before {

 content: 'NEW';

 color: rgb(255, 0, 0);

}

为了获取.element:before里的样式属性,你可以使用下面的JavaScript代码:
var color = window.getComputedStyle(

 document.querySelector('.element'), ':before'

).getPropertyValue('color')

将伪元素作为window.getComputedStyle方法的第二个参数,你能获取到伪元素样式里的属性!将这个技巧放入你的知识库里,随着浏览器的发展,伪元素将会变得越来越有用!
Javascript 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
微信小程序异步处理详解
Nov 10 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
vue框架中props的typescript用法详解
Feb 17 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 #Javascript
JavaScript中5种调用函数的方法
Mar 12 #Javascript
JavaScript实现的一个倒计时的类
Mar 12 #Javascript
JavaScript将XML转成JSON的方法
Mar 12 #Javascript
JavaScript中诡异的delete操作符
Mar 12 #Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 #Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 #Javascript
You might like
玛琪朵 Macchiato
2021/03/03 咖啡文化
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php实现的xml操作类
2016/01/15 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
征婚广告词
2014/03/17 职场文书
党性观念心得体会
2014/09/03 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android