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中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
js实现上传图片到服务器
Apr 11 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利用str_replace防注入的方法
2013/11/10 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python实现祝福弹窗效果
2019/04/07 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python滑块验证码的破解实现
2019/11/10 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
初中生操行评语大全
2014/04/24 职场文书
微电影大赛策划方案
2014/06/05 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书