CSS函数attr()

最新推荐文章于 2024-07-25 08:14:42 发布

单单单UP

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量775

点赞数

分类专栏： HTML/CSS/JS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43619292/article/details/126631424

版权

HTML/CSS/JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

详细介绍视频地址：【HTML/CSS/JS】CSS函数attr()，真是令人……

效果图

演示代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS attr()</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
        }
        
        div {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 20px;
            background: url('../../assets/images/bilibili.jpeg');
            background-size: 100%
        }
        
        div::after {
            content: attr(data-count);
            position: absolute;
            top: -15px;
            right: -15px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: red;
            color: white;
        }
        
        div[data-count='0']::after {
            display: none;
        }
        
        div[data-count='4'] {
            background: url('../../assets/images/like.gif');
            background-size: 100%
        }
        
        div[data-count='4']::after {
            content: '...';
        }
        
        [data-text] {
            color: blue;
        }
        
        [data-text]::before {
            content: attr(data-text) ' ';
            color: red;
        }
    </style>
</head>

<body>
    <div data-count='0' onclick='updateCount(this)'></div>
    <p data-text='hello'>world</p>
    <script>
        const updateCount = (e) => {
            let newCount = e.dataset.count * 1 + 1
            e.dataset.count = newCount
        };
    </script>
</body>

</html>