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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
js中小数转换整数的方法
Jan 26 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
React Native项目框架搭建的一些心得体会
May 28 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中current、next与reset函数用法实例
2014/11/17 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
Use Word to Search for Files
2007/06/15 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python批量发送post请求的实现代码
2018/05/05 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
python元组拆包实现方法
2021/02/28 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
求职者简历中的自我评价
2013/10/20 职场文书
服务员岗位责任制
2014/02/11 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
房屋出租委托书格式
2014/09/23 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
《叶问2》观后感
2015/06/15 职场文书
师范生小学见习总结
2015/06/23 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python