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获取网页中的js、css、Flash等文件
Dec 20 Javascript
JQuery 写的个性导航菜单
Dec 24 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 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文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP编程函数安全篇
2013/01/08 PHP
php数组键值用法实例分析
2015/02/27 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
JS防止用户多次提交的简单代码
2013/08/01 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
python 垃圾收集机制的实例详解
2017/08/20 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
flask中过滤器的使用详解
2018/08/01 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
外企C语言笔试题
2013/11/10 面试题
static函数与普通函数有什么区别
2015/12/25 面试题
计算机维护专业推荐信
2014/02/27 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
协议书样本
2014/04/23 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
考生诚信考试承诺书
2015/04/29 职场文书