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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JS高级运动实例分析
Dec 20 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
Vue前端项目部署IIS的实现
Jan 06 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自动加载机制的深入分析
2013/06/08 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python os.fork() 循环输出方法
2019/08/08 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
思想品德自我鉴定
2013/10/12 职场文书
情人节寄语大全
2014/04/11 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
组织生活会发言材料
2014/12/15 职场文书
医者仁心观后感
2015/06/17 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
java实现面板之间切换功能
2022/06/10 Java/Android