Question

我正在研究自定义CSS属性，并提出了以下代码。

如果我使用canvas标签上的STYLE属性将CSS内联（例如：style =＆＃34; - rgLinewidth：3＆＃34;），那么我可以使用下面显示的脚本获取自定义CSS值。

但是使用标签，如下所示，它不会显示自定义CSS属性。

有可能吗？如果是这样的话？

<html>
    <head>
        <style>
            canvas#cvs {
                --rgLinewidth: 3;
                background-color: red;
            }
        </style>
    </head>
<body>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

     <script>
        canvas = document.getElementById("cvs");
        styles = window.getComputedStyle(canvas);

        alert(styles.getPropertyValue('background-color'));
        alert(styles.getPropertyValue('--rgLinewidth'));

        for (var i=0; i<styles.length; i++) {
            if (canvas.style[i].indexOf('--rg') === 0) {
                var value = styles.getPropertyValue(canvas.style[i]);
                alert([canvas.style[i], value]);
            }
        }
    </script>
</body>
</html>

Answer 1

它不起作用，因为您查询计算样式，然后尝试从内联样式中检索相应属性的值，它们不存在 - 您的画布未定义内联样式。您需要通过查找属性的同一styles对象查询值。

考虑以下函数，当传递一个元素时，将搜索其计算的样式并返回名称以--rg开头的第一个CSS变量的值：

function find_first_rg_value(el) {
    var styles = getComputedStyle(el);
    for (var i = 0; i < styles.length; i++) {
        if (styles[i].startsWith('--rg')) {
            return styles.getPropertyValue(styles[i]);
        }
    }
}

（使用类似find_first_rg_value(canvas)）

正如我所说，我的方法与您的方法之间的区别在于您尝试从canvas.style[i]获取值，但canvas.style实际上是为空。请改用styles。

计算样式（getComputedStyle），顾名思义，包含根据CSS级联，继承等计算的“摘要”样式，内联样式（如果有）应用于顶部（覆盖优先级）。因此，分配内联样式会影响计算样式，但查询内联样式仅为您提供已分配的内联样式，不再需要。

这意味着在大多数情况下，您可能希望使用getComputedStyle。此外，由于无法使用style.fontName语法查询CSS变量，因此您需要使用getPropertyValue函数（传递的属性名称中的所有短划线完整），无论您是否处理内联或计算样式对象。

如何获取自定义CSS属性的列表

1 个答案: