(学习笔记) js获取伪元素

小剑_x

已于 2022-06-30 12:27:45 修改

阅读量3.1k

点赞数 1

文章标签： javascript

于 2022-03-26 15:43:26 首次发布

本文链接：https://blog.csdn.net/xiaojian_521/article/details/123757021

版权

(学习笔记) js获取伪元素

今天在学习的过程中，遇到无法获取css里伪元素的问题。

经过上网查找，发现事情比我想象的麻烦。伪元素并不是DOM元素，无法被js直接操作。

通过查询我发现了一种方法，可以获取伪元素的css属性，特此记下。

window.getComputedStyle() 方法

以下是在MDN上查找的方法解释

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

<style>
    ul::after {
        content: "";
        position: absolute;
        top: 0 ;
        left: 0 ;
        width: 160px;
        height: 60px;
        opacity: .2;
        background-color: #f57;
        border-radius: 50%;
        z-index: -1;
    }
</style>
<body>
    <ul>
        <li>综合</li>
        <li>电影</li>
        <li>动画</li>
        <li>游戏</li>
        <li>泛知识</li>
    </ul>
</body>
<script>
    var ul = document.querySelector(`ul`) ;
    var aTop = window.getComputedStyle(ul,"after").top;
    console.log(aTop); // 打印 0
</script>