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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
js word表格动态添加代码
Jun 07 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
Nuxt.js 数据双向绑定的实现
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
php实现的MySQL通用查询程序
2007/03/11 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python3之模块psutil系统性能信息使用
2018/05/30 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python如何更新包
2020/06/11 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
药学专业大学生自荐信
2013/09/28 职场文书
促销活动策划方案
2014/01/12 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
个人催款函范文
2015/06/23 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python