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

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>
赞 (0)

相关推荐

  • JS控制伪元素的方法汇总

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新了解伪元素(Pseudo-elements).为什么不能用JS直接获取伪元素呢? 譬

  • JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

    CSS伪元素(pseudo-elements)非常的有用--你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素.以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的: 复制代码 代码如下: .element:before {  content: 'NEW';  color: rgb(255, 0, 0); } 为了获取.element:before里的

  • 给before和after伪元素设置js效果的方法

    给before和after伪元素设置js效果的方法

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是"伪元素". 前面的话 无法直接给before和after伪元素设置js效果 例子说明 现在需要为(id为box,内容为"我是测试内容"的div)添加(:before内容为"前缀",颜色为红色的伪类) <!DOCTYPE html> <html l

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

    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

  • jQuery修改CSS伪元素属性的方法

    CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们. 假设有如下HTML代码: <div class="techbrood" id="td_pseudo">techbrood introduction</div> 和CSS代码: .techbrood:before { width: 0; } 现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%, 有两个

  • 用javascript获得css中的属性值的代码

    .divs{ border: 1px #000000 solid; width:100px; height:100px } alert(document.getElementById("xx").currentStyle.borderWidth); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element.style.attr(元素.style.属性)即可获取,示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jav

  • JavaScript获取css行间样式,内连样式和外链样式的简单方法

    [行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html>

  • 详解CSS伪元素的妙用单标签之美

    详解CSS伪元素的妙用单标签之美

    :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持这两种表示方式. #id:after{ ... } #id::after{ ... } 单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素.对于 CSS2 中已

  • JavaScript获取表单enctype属性的方法

    本文实例讲述了JavaScript获取表单enctype属性的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <body> <form id="frm1" enctype="text/plain"> First name: <input type="text" name="fname" value="Donald"&

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • 用JavaScript获取页面文档内容的实现代码

    JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础</title> </head> <body> <p>一. 用Documen

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

随机推荐