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_14_函数形式参数与arguments
Oct 20 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
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桌面中心(二) 数据库写入
2007/03/11 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php进程间通讯实例分析
2016/07/11 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python中psutil的介绍与用法
2019/05/02 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
运动会宣传口号
2014/06/09 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
开票证明
2015/06/23 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Redis Lua脚本实现ip限流示例
2022/07/15 Redis