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 相关文章推荐
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
详解vue-router导航守卫
Jan 19 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 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 has encountered an Access Violation
2007/01/15 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PDO::rollBack讲解
2019/01/29 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
vue3.0 上手体验
2020/09/21 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Python单链表简单实现代码
2016/04/27 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python脚本后台执行方式
2019/12/21 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
为什么说python更适合树莓派编程
2020/07/20 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
编辑硕士自荐信范文
2013/11/27 职场文书
阳光体育活动总结
2014/04/30 职场文书
幼儿园个人总结
2015/02/28 职场文书
工地食品安全责任书
2015/05/09 职场文书
新课程改革心得体会
2016/01/22 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python