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 相关文章推荐
用jquery实现点击栏目背景色改变
Dec 10 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
jquery实现拖动效果
Aug 10 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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学习之 认清变量的作用范围
2010/01/26 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
Python 的描述符 descriptor详解
2016/02/27 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
python excel转换csv代码实例
2019/08/26 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
如何使用python切换hosts文件
2020/04/29 Python
霸王洗发水广告词
2014/03/14 职场文书
中药专业自荐信范文
2014/03/18 职场文书
三八妇女节活动总结
2014/05/04 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
委托函范文
2015/01/29 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python