js怎么动态控制伪元素（更改样式、隐藏等）

最新推荐文章于 2023-12-08 13:41:38 发布

啊a阿花

最新推荐文章于 2023-12-08 13:41:38 发布

阅读量1.1w

点赞数 11

分类专栏： javascipt 文章标签： javascript 伪元素

本文为博主原创文章，未经博主允许禁止转载，转载请注明出处！

本文链接：https://blog.csdn.net/aaahuahua/article/details/113802840

版权

javascipt 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

js控制伪元素

大家应该知道js是不能直接控制伪元素的，所以总结了俩方法。下面是未改变前的代码和实现效果。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
        }
        .box:before{
            content: '阿花';color: red;font-size: 24px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这里插入图片描述

1.通过attr()改变伪元素的值

伪元素通过attr()来获取标签自定义属性的值。这个方法的缺点就是只能改变伪元素的值，而不能改变伪元素的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .box{
            width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
        }
        .box:before{
            content: attr(dataBefore);color: red;font-size: 24px;
        }
    </style>
</head>
<body>
<div class="box" dataBefore="阿花"></div>
<script>
var box=document.querySelector('.box');
box.setAttribute('dataBefore','谢谢你');//第二个值为‘’就是伪元素隐藏效果
</script>
</body>
</html>

在这里插入图片描述

2.覆盖原有样式

这个方法能更改伪元素的值和样式，缺点就是会造成部分css多余代码，设置content:’ ’ 就可以实现伪元素隐藏效果，当然你也可以设置opacity=0或者display=none都行，看需求

（1）css优先级覆盖

为父元素添加一个新的class类名。后面类名的优先级会高于前面的，将前面的样式覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
        }
        .box:before{
            content: '阿花';color: red;font-size: 24px;
        }
        .skate:before{
        /*提前写在css样式表里，js添加完skate类名后便会覆盖前面box的样式*/
            content: '谢谢你';color: blue;font-size: 24px;}
      </style>
</head>
<body>
<div class="box"></div>
<script>
    var box=document.querySelector('.box');
    box.classList.add('skate');//添加classname  skate
</script>
</body>
</html>

在这里插入图片描述

（2）更改class类名覆盖

在css中写好新类名的样式，通过js修改类名，之前的样式就会失效（可以看一下和上一个方法其实没什么太大区别）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
        }
        .box:before{
            content: '阿花';color: red;font-size: 24px;
        }
        .skate{
            width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
        }
        .skate:before{
            content: '谢谢你';color: blue;font-size: 24px;}
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var box=document.querySelector('.box');
    box.className='skate';//更改classname为skate
</script>
</body>
</html>

在这里插入图片描述

（3）内联样式表覆盖

这个适用的前提是你的css写在了外部样式表中，用js动态添加一个内联样式，内联样式优先级大于外部样式，外部样式就会失效；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<script>
    var style=document.createElement('style');//创建一个<style>标签
    var change=document.createTextNode('.box:before{content:"谢谢你";color:blue;}')//更改后伪元素的样式
    style.appendChild(change);//把样式添加到style标签里
    document.body.appendChild(style);//把内联样式表添加到html中
</script>
</body>
</html>