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 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
ES5新增数组的实现方法
May 12 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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使用ICQ网关发送手机短信
2013/10/30 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
Javascript操作select控件代码实例
2020/02/14 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Python input函数使用实例解析
2019/11/22 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
过滤器的用法
2013/10/08 面试题
历史专业大学生职业生涯规划书
2014/03/13 职场文书
读书演讲主持词
2014/03/18 职场文书
公司承诺书格式范文
2015/04/28 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL