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 学习之旅 (2)
Feb 05 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
JavaScript File分段上传
2016/03/10 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
深入浅析python继承问题
2016/05/29 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python下载库的步骤方法
2019/10/12 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
接口中的方法可以是abstract的吗
2015/07/23 面试题
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
创先争优活动承诺书
2014/08/30 职场文书
大一新生期末自我评价
2014/09/12 职场文书
文明倡议书
2015/01/19 职场文书
教师远程研修感悟
2015/11/18 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Python List remove()实例用法详解
2021/08/02 Python
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers