js动态修改伪类的content

最新推荐文章于 2024-04-22 17:40:03 发布

落叶惊雷

最新推荐文章于 2024-04-22 17:40:03 发布

阅读量2.3k

点赞数 1

分类专栏：前端技术相关问题解决文章标签： css js javascript

本文链接：https://blog.csdn.net/juststartnow/article/details/110872129

版权

前端技术相关同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

问题解决

6 篇文章 0 订阅

订阅专栏

目的：为了在页面中动态改变某个标签的伪类中的content的内容。实际运用场景有，如输入框下方的输入错误提示可以使用伪类的方式实现，又要根据不通的错误提示不同的内容。

在这里插入图片描述

主要使用 css中的 attr()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
</head>
<body>
    <span data-before='哈哈哈'>sdsd</span>
    <button onclick="change()">点击改变</button>
</body>
<style>
    span::before{
        content: attr(data-before);
    }
</style>
<script>
    let change = ()=>{
        let oSpan = document.querySelector("span");
        oSpan.setAttribute("data-before","改变")
    };
</script>
</html>

data-before这个属性要在伪类对应的标签中

attr() 函数返回选择元素的属性值

注意: IE8 需要声明 !DOCTYPE 才可以支持 attr() 函数。

落叶惊雷

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js动态修改伪类的content

目的：为了在页面中动态改变某个标签的伪类中的content的内容。实际运用场景有，如输入框下方的输入错误提示可以使用伪类的方式实现，又要根据不通的错误提示不同的内容。主要使用 css中的 attr()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, .
复制链接

扫一扫