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 中字符串连接的性能的一些问题
May 07 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
详解vue组件中使用路由方法
Feb 12 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
处理canvas绘制图片模糊问题
May 11 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应用JSON技巧讲解
2013/02/03 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
python使用append合并两个数组的方法
2015/04/28 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
一份python入门应该看的学习资料
2018/04/11 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python的json包位置及用法总结
2020/06/21 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
酒店公关部经理岗位职责
2013/11/24 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android