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 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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导入Excel到MySQL的方法
2011/04/23 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
jquery判断浏览器类型的代码
2012/11/05 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python获取代理IP的实例分享
2018/05/07 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
社会实践自我鉴定
2013/11/07 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
物流管理专业推荐信
2014/09/06 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
小学生学习保证书
2015/02/26 职场文书
奖学金个人总结
2015/03/04 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python