胖蔡说技术
随便扯扯

使用attr()实现数据的动态替换

CSS函数中给我们提供了一个attr()函数。今天我们来了解下如何来使用这个attr()函数,以及使用时需要注意哪些问题。attr() 理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性,其他的属性和高级特性目前是实验性的。

结构

首先来了解下attr()函数的组成结构,以及组成的各部分的含义,首先我们来看下attr()函数使用格式:

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

如上所示,我们可以传入 attribute-name<type-or-unit><fallback>,但就目前浏览器的支持来说,仅仅支持attribute-name

  • attribute-name:是 CSS 所引用的 HTML 标签的属性名
  • <type-or-unit>:表示所引用的属性值的单位,其合法值有很多,由于浏览器并不支持,尚属于实验特性,就不介绍了。
  • <fallback>:如果 HTML 元素缺少所规定的属性值或属性值不合法,则使用fallback值。该值必须合法,且不能包含另一个attr()表达式。

浏览器兼容性

使用

这里使用一个案例,通过点击不同单位来切换单位显示从而来帮助理解这个函数的使用。

<style>
        .info {
            background-color: #acacac;
            position: relative;
            margin-bottom: 20px;
        }

        .info::after {
            content: attr(data-type);
        }
    </style>
 <div id="unit" class="info" data-type="元">
        <span>10</span>
    </div>
    <button onclick="swithType('元')">元</button>
    <button onclick="swithType('角')">角</button>
    <button onclick="swithType('分')">分</button>

    <script type="text/javascript">
        function swithType(text) {
            var unitDiv = document.getElementById("unit");
            unitDiv.setAttribute("data-type",text);
        }
    </script>
点击访问GitHub仓库源码。
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 使用attr()实现数据的动态替换
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏