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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
javaScript之split与join的区别(详解)
Nov 08 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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经典的给图片加水印程序
2006/12/06 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
Laravel下生成验证码的类
2017/11/15 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
js编写选项卡效果
2017/05/23 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Python csv模块使用方法代码实例
2019/08/29 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python可以用哪些数据库
2020/06/22 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
岗位竞聘演讲稿
2014/01/10 职场文书
会议主持词结束语
2015/07/03 职场文书
聘任书的格式及模板
2019/10/28 职场文书
七年级作文之下雨天
2019/12/23 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫