Javascript 将CSS颜色列表传递给JS

我打印了一些图表，这些颜色代表图表中线条的颜色。我有3-4个网站，每个网站都有不同的CSS，我需要使这些颜色取决于特定的CSS网站

我有类似的东西

var options = {
    colors: ["#0099cc", "#f7a35c", "#ff0066",
            "#90ee7e", "#7798BF", "#aaeeee",
            "#7cb5ec", "#eeaaee", "#55bf3b",
            "#df5353", "#7798bf", "#aaeeee"]
}

我需要找到一些优雅的方法，如何从CSS中获取这些颜色值

我需要这个

CSS文件

JS文件

---

基本上，因为CSS是一个文件，它应该位于服务器的某个位置，所以您不能通过JS直接读取CSS文件的内容。所以有两种方法可以实现你想要的

第一：

在HTML文件中使用CSS。 e、 g,

第二：

使用ajax从服务器上获取CSS文件的内容，并使用它做任何您想做的事情

现在，下一个问题是如何从CSS内容轻松解析CSS：

没有通过JS直接解析CSS的方法，要么您必须编写自己的实现，要么使用一些已经存在的库，如JSCSSP好的，下面是我的尝试： 这将在CSS文件中找到所有颜色

(async function () {
    // Get the CSS from a file
    const css = await fetch('file.css')
    // Convert the file to text
    .then(response => response.text())
    // Remove the comments
    .then(text => text.replace(/\/\*[\s\S]*?\*\//g, ''));

    // Process the css text.
    const colours = [];

    // Find hex colours
    // #123456 or #123
    (css.match(/(#[\da-f]{6}|#[\da-f]{3})/g) || [])

    // Add them to the colours array
    .forEach(colour => colours.push(colour));


    // Find rgb(a) and hsl(a) colours
    // rgb(25, 255, 53) or rgbs(25, 255, 53, 0)
    // hsl(180, 50%, 50%) or hsls(180, 50%, 50%, 0)
    (css.match(/(rgb|hsl)(a?)\(([\d\.\-\s,]{5,})\)/g) || [])

    // Add them to the colours array
    .forEach(colour => colours.push(colour));

    // Find named colours 
    const colourList = [
        'Black', 'Navy', 'DarkBlue', 'MediumBlue', 'Blue', 'DarkGreen', 'Green', 'Teal',
        'DarkCyan', 'DeepSkyBlue', 'DarkTurquoise', 'MediumSpringGreen', 'Lime', 'SpringGreen',
        'Aqua', 'Cyan', 'MidnightBlue', 'DodgerBlue', 'LightSeaGreen', 'ForestGreen', 'SeaGreen',
        'DarkSlateGray', 'DarkSlateGrey', 'LimeGreen', 'MediumSeaGreen', 'Turquoise', 'RoyalBlue',
        'SteelBlue', 'DarkSlateBlue', 'MediumTurquoise', 'Indigo', 'DarkOliveGreen', 'CadetBlue',
        'CornflowerBlue', 'RebeccaPurple', 'MediumAquaMarine', 'DimGray', 'DimGrey', 'SlateBlue',
        'OliveDrab', 'SlateGray', 'SlateGrey', 'LightSlateGray', 'LightSlateGrey', 'MediumSlateBlue',
        'LawnGreen', 'Chartreuse', 'Aquamarine', 'Maroon', 'Purple', 'Olive', 'Gray', 'Grey', 'SkyBlue',
        'LightSkyBlue', 'BlueViolet', 'DarkRed', 'DarkMagenta', 'SaddleBrown', 'DarkSeaGreen', 'LightGreen',
        'MediumPurple', 'DarkViolet', 'PaleGreen', 'DarkOrchid', 'YellowGreen', 'Sienna', 'Brown', 'DarkGray',
        'DarkGrey', 'LightBlue', 'GreenYellow', 'PaleTurquoise', 'LightSteelBlue', 'PowderBlue', 'FireBrick',
        'DarkGoldenRod', 'MediumOrchid', 'RosyBrown', 'DarkKhaki', 'Silver', 'MediumVioletRed', 'IndianRed',
        'Peru', 'Chocolate', 'Tan', 'LightGray', 'LightGrey', 'Thistle', 'Orchid', 'GoldenRod', 'PaleVioletRed',
        'Crimson', 'Gainsboro', 'Plum', 'BurlyWood', 'LightCyan', 'Lavender', 'DarkSalmon', 'Violet',
        'PaleGoldenRod', 'LightCoral', 'Khaki', 'AliceBlue', 'HoneyDew', 'Azure', 'SandyBrown', 'Wheat',
        'Beige', 'WhiteSmoke', 'MintCream', 'GhostWhite', 'Salmon', 'AntiqueWhite', 'Linen', 'LightGoldenRodYellow',
        'OldLace', 'Red', 'Fuchsia', 'Magenta', 'DeepPink', 'OrangeRed', 'Tomato', 'HotPink', 'Coral', 'DarkOrange',
        'LightSalmon', 'Orange', 'LightPink', 'Pink', 'Gold', 'PeachPuff', 'NavajoWhite', 'Moccasin', 'Bisque',
        'MistyRose', 'BlanchedAlmond', 'PapayaWhip', 'LavenderBlush', 'SeaShell', 'Cornsilk', 'LemonChiffon',
        'FloralWhite', 'Snow', 'Yellow', 'LightYellow', 'Ivory', 'White'
    ];

    (css.match(new RegExp(colourList.join('|'), 'g')) || [])
    // Add them to the colours array
    .forEach(colour => colours.push(colour));

    // Here 'should' be all the colours
    // The filter removes all the duplicate colours
    console.log(colours.filter((v, i, a) => a.indexOf(v) === i));
})();

非常重要的是要注意，这不是最好的方法，也不是傻瓜式的。例如，在我看来，更好的方法是使用CSS解析器，然后以某种方式对其进行解析

---

然而，这是一个沉默点，因为我认为你应该在每个站点的基础上手动设置颜色，而不是试图解析颜色。

你的意思是喜欢吗？是这样的，但我需要例如10种颜色和idk，如何在CSS中表示它。为每种颜色制作类让我很害怕。请首先正确地描述一下你想要在这里实现什么。那么你只是想从css文件中提取所有任意颜色还是什么？它们是背景色、边框色还是其他颜色都不重要吗？我不明白…CSS是在文件中还是在DOM中？有一个内联CSS，它不在服务器外部的文件中。@TahaPaksu他写得很清楚CSS文件，他从来没有提到任何内联样式的地方。此外，我还提到了各种可能性的处理过程。我正在给你的CSS写评论，它是一个文件，应该在服务器的某个地方。这是不对的。然后你可以选择我提到的第一个选项。

options.colors = loadColorsFromCSS();

<style id="stylesheet">
.color{}
</style>

cssContent = document.getElementById("stylesheet").innerHtml;

//Now do whatever you want with cssContent

(async function () {
    // Get the CSS from a file
    const css = await fetch('file.css')
    // Convert the file to text
    .then(response => response.text())
    // Remove the comments
    .then(text => text.replace(/\/\*[\s\S]*?\*\//g, ''));

    // Process the css text.
    const colours = [];

    // Find hex colours
    // #123456 or #123
    (css.match(/(#[\da-f]{6}|#[\da-f]{3})/g) || [])

    // Add them to the colours array
    .forEach(colour => colours.push(colour));


    // Find rgb(a) and hsl(a) colours
    // rgb(25, 255, 53) or rgbs(25, 255, 53, 0)
    // hsl(180, 50%, 50%) or hsls(180, 50%, 50%, 0)
    (css.match(/(rgb|hsl)(a?)\(([\d\.\-\s,]{5,})\)/g) || [])

    // Add them to the colours array
    .forEach(colour => colours.push(colour));

    // Find named colours 
    const colourList = [
        'Black', 'Navy', 'DarkBlue', 'MediumBlue', 'Blue', 'DarkGreen', 'Green', 'Teal',
        'DarkCyan', 'DeepSkyBlue', 'DarkTurquoise', 'MediumSpringGreen', 'Lime', 'SpringGreen',
        'Aqua', 'Cyan', 'MidnightBlue', 'DodgerBlue', 'LightSeaGreen', 'ForestGreen', 'SeaGreen',
        'DarkSlateGray', 'DarkSlateGrey', 'LimeGreen', 'MediumSeaGreen', 'Turquoise', 'RoyalBlue',
        'SteelBlue', 'DarkSlateBlue', 'MediumTurquoise', 'Indigo', 'DarkOliveGreen', 'CadetBlue',
        'CornflowerBlue', 'RebeccaPurple', 'MediumAquaMarine', 'DimGray', 'DimGrey', 'SlateBlue',
        'OliveDrab', 'SlateGray', 'SlateGrey', 'LightSlateGray', 'LightSlateGrey', 'MediumSlateBlue',
        'LawnGreen', 'Chartreuse', 'Aquamarine', 'Maroon', 'Purple', 'Olive', 'Gray', 'Grey', 'SkyBlue',
        'LightSkyBlue', 'BlueViolet', 'DarkRed', 'DarkMagenta', 'SaddleBrown', 'DarkSeaGreen', 'LightGreen',
        'MediumPurple', 'DarkViolet', 'PaleGreen', 'DarkOrchid', 'YellowGreen', 'Sienna', 'Brown', 'DarkGray',
        'DarkGrey', 'LightBlue', 'GreenYellow', 'PaleTurquoise', 'LightSteelBlue', 'PowderBlue', 'FireBrick',
        'DarkGoldenRod', 'MediumOrchid', 'RosyBrown', 'DarkKhaki', 'Silver', 'MediumVioletRed', 'IndianRed',
        'Peru', 'Chocolate', 'Tan', 'LightGray', 'LightGrey', 'Thistle', 'Orchid', 'GoldenRod', 'PaleVioletRed',
        'Crimson', 'Gainsboro', 'Plum', 'BurlyWood', 'LightCyan', 'Lavender', 'DarkSalmon', 'Violet',
        'PaleGoldenRod', 'LightCoral', 'Khaki', 'AliceBlue', 'HoneyDew', 'Azure', 'SandyBrown', 'Wheat',
        'Beige', 'WhiteSmoke', 'MintCream', 'GhostWhite', 'Salmon', 'AntiqueWhite', 'Linen', 'LightGoldenRodYellow',
        'OldLace', 'Red', 'Fuchsia', 'Magenta', 'DeepPink', 'OrangeRed', 'Tomato', 'HotPink', 'Coral', 'DarkOrange',
        'LightSalmon', 'Orange', 'LightPink', 'Pink', 'Gold', 'PeachPuff', 'NavajoWhite', 'Moccasin', 'Bisque',
        'MistyRose', 'BlanchedAlmond', 'PapayaWhip', 'LavenderBlush', 'SeaShell', 'Cornsilk', 'LemonChiffon',
        'FloralWhite', 'Snow', 'Yellow', 'LightYellow', 'Ivory', 'White'
    ];

    (css.match(new RegExp(colourList.join('|'), 'g')) || [])
    // Add them to the colours array
    .forEach(colour => colours.push(colour));

    // Here 'should' be all the colours
    // The filter removes all the duplicate colours
    console.log(colours.filter((v, i, a) => a.indexOf(v) === i));
})();