如何获取给定 CSS 属性的所有允许值的数组？答案

【问题标题】：How can I get an array of all allowed values of a given CSS property?如何获取给定 CSS 属性的所有允许值的数组？
【发布时间】：2017-07-24 20:16:00
【问题描述】：

我需要将它们全部（可能不包括 url）放在 JS 的数组中。

问题是，如何创建这样的数组？ Ofc 我可以对其进行硬编码，但如果将来添加另一个允许的值，或者某个值被弃用或删除……那么，该语言是否提供了任何方法来获取这样的数组？

当然，除了从诸如 MDN 之类的文档站点甚至从标准网页中获取此内容之外，这将是一种矫枉过正。

【问题讨论】：

唯一真正的方法是需要维护的列表。
不，据我所知，没有办法获取样式的有效值列表，您必须使用列表对其进行硬编码
看这里：stackoverflow.com/questions/11219691/…
或者可能是stackoverflow.com/questions/1471118/…
除了我的回答之外，根据您要执行的操作，您可能还需要检查 CSS 解析器。 Tab Atkins 在他的 GitHub 上有一个。

标签： javascript css

【解决方案1】：

不幸的是，唯一的方法是对其进行硬编码或抓取网页。 JavaScript 没有任何允许这样的原生函数。

但要记住的是，许多属性（如 height、width 等）可以接受任意数量的值。

【讨论】：

【解决方案2】：

不知道您是否在使用 PHP，但这里有一种方法可以让您抓取包含此信息的网页以获取每个 CSS 属性的值。显然，您可能希望获得该站点的许可，这样您就不会通过访问属性页面来敲击他们的服务器，正如您所看到的，我只限于下面的 10 个结果。使用“ob”功能，不确定它是否是最富豪的解决方案..

<?php
ini_set('max_execution_time', 600);
ob_end_clean();
ob_implicit_flush(true);
libxml_use_internal_errors(true);

function getValuesForElement($element) {
    $valueArray = [];
    try {
        $dom = new DOMDocument();
        $dom->prevservWhiteSpace = false;
        $dom->loadHTMLFile('http://css-infos.net/property/' . $element);
        $data = $dom->getElementsByTagName('code');
        foreach($data as $css) {
            $val = preg_replace("/\s+/S", "", $css->nodeValue);
            if(!empty($val)) {
                $valueArray[] = $val;
            }
        }
    } catch(Exception $e) {

        // Log error..

    }

    return $valueArray;
}

function getElements() {


    try {
        $i = 0;
        $elementsArr = [];
        $dom = new DOMDocument();
        $dom->prevservWhiteSpace = false;
        $dom->loadHTMLFile('http://css-infos.net/');
        $data = $dom->getElementsByTagName('li');
        foreach($data as $css) {
            if($i === 10) {
                break;
            }
            $nodeVal = $css->nodeValue;
            if($nodeVal == "Webkit CSS properties") {
                continue;
            }
            $elementsArr[$nodeVal] = getValuesForElement($nodeVal);
            echo "getting <strong><em>".$nodeVal."</em></strong> values..\n";
            $i++;
            sleep(1);
        }
    } catch(Exception $e) {

        // Log error..

    }

    print_r($elementsArr);
}

echo "<pre>";
getElements();
die();
?>

【讨论】：

CSS 规范会定期更新，但 css-infos.net 中的列表没有更新，不推荐使用。有关完整和更新的列表，请参阅w3.org/TR/2021