Javascript获取CSS伪元素的属性

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

看看下面的CSS代码:

copytext

 代码如下 复制代码
.element:before {
    content: 'NEW';
    color: rgb(255, 0, 0);
}.element:before {
 content: 'NEW';
 color: rgb(255, 0, 0);
}

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

 代码如下 复制代码
copytext
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>

时间: 2024-09-28 16:18:25

Javascript获取CSS伪元素的属性的相关文章

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

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

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

 这篇文章主要介绍了JavaScript获取伪元素(Pseudo-Element)属性的方法技巧,本文直接给出实现代码,需要的朋友可以参考下     CSS伪元素(pseudo-elements)非常的有用--你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素.以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的: 代码如下: .element:bef

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

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

CSS伪元素before和after制作时尚焦点图相框

文章简介:CSS伪元素before.after妙用:制作时尚焦点图相框 在css标签中有这样子的标签div:before.div:after,对于before.after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处?:befor.:after是CSS的伪元素,什么是伪元素呢?伪元素用于向某些选择器设置特殊效果.我们用CSS手册可以查询到其基本的用法: E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容.用来和content属性一起使用 E:aft

CSS伪元素before、after妙用:制作时尚焦点图相框

在css选择器中有这样子的写法div:before.div:after,对于before.after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处? :befor.:after是CSS的伪元素,什么是伪元素呢?伪元素用于向某些选择器设置特殊效果. 我们用CSS手册可以查询到其基本的用法: E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容.用来和content属性一起使用 E:after/E::after 设置在对象后(依据对象树的逻辑结构)发生的

学习网页技术CSS高级教程之CSS 伪元素

css|高级|教程|网页 CSS 伪元素被用来将特殊的效果添加到某些选择器. CSS 伪元素 (Pseudo-elements)实例: 制作首字母特效 本例演示如何向文本的首字母添加特效. <html><head><style type="text/css">p:first-letter {color: #ff0000;font-size:xx-large}</style></head><body><p>

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

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

使用CSS伪元素实现文字部分变色的方法

    思路 思路很简单,就是一个字写两遍,一个字只显示部分,不过不能真的把一个字写两遍.这里就需要用到CSS伪元素:before和:after,记住这个"伪元素"的"伪"字,表明它本来是不存在的.我们的方法就是在伪元素里放置相同的字符,只显示半个,而原字符显示另外一半,最后把它们拼成一个字. CSS Code CSS Code复制内容到剪贴板 .hf { display: inline-block; font-size: 80px; line-height:80p

js如何控制css伪元素内容(before,after)

原文:js如何控制css伪元素内容(before,after) js如何控制css伪元素(before,after) @(CSS 笔记)[伪元素|css3]曾经遇到的问题,在对抗UC浏览器屏蔽需要把内容输出到css 伪元素中输出.有个疑问如何用js控制它.于是在segmentfault提问,如下是对问题的整理: 如何用js控制css伪类after 简单粗暴的方式: 简单粗暴的方式,直接在html中添加样式覆盖掉之前样式规则 <style> p:after{content:'我是后缀'} <