css2object

// 将 CSS 样式转换为 JavaScript 对象的示例代码

function cssToObject(cssString) {
    const obj = {};
    const rules = cssString.split('}').filter(rule => rule.trim() !== '');

    for (const rule of rules) {
        const [selectorPart, stylesPart] = rule.split('{');
        const selector = selectorPart.trim();
        const styles = stylesPart.trim();

        if (!obj[selector]) {
            obj[selector] = {};
        }

        styles.split(';').forEach(style => {
            const [property, value] = style.split(':').map(part => part.trim());
            if (property && value) {
                obj[selector][property] = value;
            }
        });
    }

    return obj;
}

// 示例 CSS 字符串
const cssString = `
body {
    background-color: #fff;
    color: #000;
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
    font-size: 24px;
}
`;

// 调用函数并输出结果
console.log(cssToObject(cssString));

解释说明：

• cssToObject 函数接收一个 CSS 字符串作为参数，并将其解析为一个 JavaScript 对象。
• 首先，通过 split('}') 方法将 CSS 字符串按规则分隔成多个部分，每个部分包含一个选择器和对应的样式声明。
• 然后，对于每个规则，进一步通过 split('{') 分割选择器和样式声明。
• 接着，遍历每个样式的属性和值，并将其存储在对象中。
• 最终返回一个嵌套的对象结构，其中键是 CSS 选择器，值是包含样式属性和值的对象。

这个例子展示了如何将简单的 CSS 字符串转换为易于操作的 JavaScript 对象。