Javascript获取CSS伪元素属性的实现代码


Posted in Javascript onSeptember 28, 2014

CSS伪元素非常强大,它经常被用来创建CSS三角形提示,使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签。有一点就是Javascript无法获取到这些CSS属性值,但现在有一种方法可以获取到:

看看下面的CSS代码:

.element:before {
  content: 'NEW';
  color: rgb(255, 0, 0);
}.element:before {
	content: 'NEW';
	color: rgb(255, 0, 0);
}

为了获取到.element:before的颜色属性,你可以使用下面的代码:

var color = window.getComputedStyle(
  document.querySelector('.element'), ':before'
).getPropertyValue('color')var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color')

把伪元素作为第二个参数传到window.getComputedStyle方法中就可以获取到它的CSS属性了。把这段代码放到你的工具函数集里面去吧。随着伪元素被越来越多的浏览器支持,这个方法会很有用的。

译者注:window.getComputedStyle方法在IE9以下的浏览器不支持,getPropertyValue必须配合getComputedStyle方法一起使用。IE支持CurrentStyle属性,但还是无法获取伪元素的属性。

准确获取指定元素 CSS 属性值的方法。

<script type="text/javascript"> 
function getStyle( elem, name ) 
{ 
  //如果该属性存在于style[]中,则它最近被设置过(且就是当前的) 
  if (elem.style[name]) 
  { 
    return elem.style[name]; 
  } 
  //否则,尝试IE的方式 
  else if (elem.currentStyle) 
  { 
    return elem.currentStyle[name]; 
  } 
  //或者W3C的方法,如果存在的话 
  else if (document.defaultView && document.defaultView.getComputedStyle) 
  { 
    //它使用传统的"text-Align"风格的规则书写方式,而不是"textAlign" 
    name = name.replace(/([A-Z])/g,"-$1"); 
    name = name.toLowerCase(); 
    //获取style对象并取得属性的值(如果存在的话) 
    var s = document.defaultView.getComputedStyle(elem,""); 
    return s && s.getPropertyValue(name); 
  //否则,就是在使用其它的浏览器 
  } 
  else 
  { 
    return null; 
  } 
} 
</script>
Javascript 相关文章推荐
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
JavaScript门道之标准库
May 26 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 #Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 #Javascript
浏览器缩放检测的js代码
Sep 28 #Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 #Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 #Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 #Javascript
js文件包含的几种方式介绍
Sep 28 #Javascript
You might like
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
vue+element UI实现树形表格
2020/12/29 Vue.js
python实现决策树
2017/12/21 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
python中取绝对值简单方法总结
2020/07/24 Python
请说出几个常用的异常类
2013/01/08 面试题
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
硕士研究生个人求职信
2013/12/04 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
文化产业实施方案
2014/06/07 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang
golang为什么要统一错误处理
2022/04/03 Golang