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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
javascript判断office版本示例
Apr 11 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
js实现贪吃蛇小游戏
Oct 29 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
php连接mysql数据库代码
2009/03/10 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
浅析javascript的return语句
2015/12/15 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
介绍Python中的__future__模块
2015/04/27 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python实现抽奖小程序
2020/04/15 Python
Python实现点云投影到平面显示
2020/01/18 Python
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
医校毕业生自我鉴定
2014/01/25 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
校园文化标语
2014/06/18 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
认真学习保证书
2015/02/26 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL