使用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>