从类名获取颜色 - Javascript

在一些CSS库中，如Materialize和Bootstrap，颜色经常被作为类名添加到HTML元素上。在这种情况下，您可以使用JavaScript从类名中获取颜色值并将其应用于其他元素。

步骤

1. 获取元素的类名

   const elementClasses = document.querySelector('#myElement').className.split(' ');
   

   这将返回一个将元素的所有类名拆分为数组的对象。

2. 迭代类名以查找颜色类

   let colorClass;
   elementClasses.forEach(className => {
     if (className.includes('blue')) {
       colorClass = className;
     }
   });
   

   这将迭代元素的每个类名，并如果类名中包含“blue”（或其他任何颜色名称），则将颜色类名赋给变量。

3. 获取颜色值

   const colorValue = getComputedStyle(document.documentElement).getPropertyValue(`--${colorClass}`);
   

   这将返回与颜色类名匹配的CSS变量的值。例如，如果colorClass是“blue lighten-1”，则将返回变量--blue-lighten-1的值。

4. 应用颜色值

   document.querySelector('#myOtherElement').style.backgroundColor = colorValue;
   

   这将将找到的颜色值作为背景颜色应用于另一个元素。

完整代码

const elementClasses = document.querySelector('#myElement').className.split(' ');
let colorClass;
elementClasses.forEach(className => {
  if (className.includes('blue')) {
    colorClass = className;
  }
});
const colorValue = getComputedStyle(document.documentElement).getPropertyValue(`--${colorClass}`);
document.querySelector('#myOtherElement').style.backgroundColor = colorValue;

结论

这是一个非常基本的JavaScript代码段，可以用来从类名中提取颜色，并将其应用于另一个元素。它可以扩展和自定义以适应您的特定需求，例如迭代多个元素和循环多个颜色类。 另外，请注意，这不适用于所有CSS库和框架，因此您需要在使用时小心测试。