时间戳

首页 > 解决方案 > 如何在javascript中将对象转换为有效的css样式？

javascript - 如何在javascript中将对象转换为有效的css样式？

问题描述

我有一个对象，需要将其转换为 CSS，例如：

     const options = {
            style: {
                base: {
                    background: 'red',
                    ':hover': {
                        background: 'green',
                    },
                },
            },
        };

我使用包jso-to-css工作正常，但万一嵌套对象像悬停返回[Object]

base{background:red;:hover:[object Object]}

代替

base{background:red;}
base:hover{background: green;}

此外，欢迎任何与 react 兼容的建议。

标签： javascriptcssreactjs

解决方案

如果您更改数据结构 - 您可以轻松地从对象或 JSON 等创建样式规则。

了解样式规则的结构包含三个部分 -选择器/属性和值- 您可以创建一个数据结构以允许将它们解析为字符串，然后插入到现有样式表中 - 或者您可以创建一个全新的样式表，将其附加到文档头部，然后插入规则。

您将需要创建一个计划以允许代码了解嵌套 - 例如 - 我使用伪状态作为子数组以允许基本元素的样式 - 并迭代伪状态数组并为每个 - 将其传递给与原始基本元素相同的 createStyle 函数，并创建它们的样式规则...您可以使用任何类型的样式来执行此操作 - 您只需对其进行计划并更新数据结构以匹配计划的样式.

在下面 - 我正在设置 p 元素的背景颜色和文本颜色，然后在悬停时更改两者。您可以将其扩展为具有选择器的类型（id 或类） - 但将其留作进一步开发。这包括“#”或“.” 在选择器中。

const options = [{
  selector: '.base',
  declarations: [{
    property: 'background',
    value: 'red',
   },{
    property: 'color',
    value: 'white',
   }],
  pseudoStates:[{
    selector: ':hover',
    declarations: [{
      property: 'background',
      value: 'green'
     },{
      property: 'color',
      value: 'orange'
     },{
      property: 'cursor',
      value: 'pointer'
     }]
  }]
}, {
  selector: '#extra',
  declarations: [{
    property: 'background',
    value: 'aqua',
   },{
    property: 'color',
    value: 'black',
   }],
  pseudoStates:[{
    selector: ':hover',
    declarations: [{
      property: 'background',
      value: 'blue'
     },{
      property: 'color',
      value: 'white'
     }]
  }]
}]

options.forEach(function(option){
 createStyleRule(option.selector, option.declarations);
 option.pseudoStates.forEach(function(pS){
   createStyleRule(option.selector + pS.selector, pS.declarations);
 })
});

function createStyleRule(selector, declarations){
  let styleDeclarations = [];
  declarations.forEach(function(dec){
    styleDeclarations.push( dec.property +": " + dec.value);
  })
  let styleRule = selector + " {" + styleDeclarations.join("; ") + "}";
  document.styleSheets[0].insertRule(styleRule, 0);
}
<p class="base">This is the base element</p>
<p id="extra">This is the extra element</p>

推荐阅读