[英]How can I convert a nested javascript object into an inline string of CSS styles?
I have a javascript object that contains descriptions for CSS styles.我有一个 javascript object 包含 CSS ZBC4150D023D3255136ZDB671D61AC93F2 的描述。
This object comes from a third-party API, so I am not able to modify the object.这个 object 来自第三方 API,所以我无法修改 object。
I'd like to parse and output the object to a string.我想将 output 和 object 解析为一个字符串。
The string needs to be useable as a inline styles in the head of my HTML.该字符串需要可用作我的 HTML 头部的内联 styles。
I need to be able to map "base" and "invalid" to custom class names.我需要能够将 map “基础”和“无效”自定义 class 名称。 These can be provided as variables.这些可以作为变量提供。
The invalid > color needs to be mapped to a border color.无效的 > 颜色需要映射到边框颜色。 Basically it comes from the object as "color", but I need to use it as a border color.基本上它来自 object 作为“颜色”,但我需要使用它作为边框颜色。
I've tried nesting loops and have just been extremely stuck trying to figure out an elegant solve to this problem.我已经尝试过嵌套循环,并且一直非常努力地试图找出一个优雅的解决方案来解决这个问题。
Please, if you need more detail, ask me and I'll answer as best I can to help clarify.请,如果您需要更多详细信息,请问我,我会尽力回答以帮助澄清。
The JavaScript Object I receive: JavaScript Object 我收到:
{
style: {
base: {
color: '#46a0ba',
'::placeholder': {
color: '#000'
}
},
invalid: {
color: 'yellow'
}
},
}
I need this to output as a sinlge-line string:我需要这个 output 作为单行字符串:
(I'm putting this on multiple lines to just make it easier to read here) (我把它放在多行上,以便在这里更容易阅读)
.baseClass { color: #46a0ba; }
.baseClass::placeholder {color: #000}
.invalidClass { border: 1px solid yellow; }
See CodePen of where I am at so far here:请参阅 CodePen,了解我目前所处的位置:
https://codepen.io/fylzero/pen/gOOvdVp https://codepen.io/fylzero/pen/gOOvdVp
I'm separating the object data into properties that go into the main rule and nested stuff that needs separate rules.我将 object 数据分为属性,将 go 分为主要规则和需要单独规则的嵌套内容。 Using recursion for the second part and Array functions like map()
and join()
, we get:对第二部分使用递归以及像map()
和join()
这样的数组函数,我们得到:
const inputStyle = { base: { color: '#46a0ba', padding: '0.5em', 'font-size': '14pt', '::placeholder': { color: '#000' }, ':hover': { color: 'red' } }, invalid: { color: 'yellow' } }; function rules(className, obj) { const allProps = Object.entries(obj); const directProps = allProps.filter(([key, value]) => typeof value == 'string'); const pseudoProps = allProps.filter(([key, value]) => typeof value == 'object'); const directStyle = `.${className} { ${directProps.map(([key, value]) => `${key}: ${value};`).join(' ')} }`; const pseudoStyle = pseudoProps.map(([key, value]) => rules(className + key, value)).join(' '); return [directStyle, pseudoStyle].join(' '); } function appendStyle(baseName, invalidName, styleObj) { const styleElement = document.createElement("style"); styleElement.textContent = [rules(baseName, styleObj.base), `.${invalidName} { border: 1px solid ${styleObj.invalid.color}; }`].join(' '); document.head.append(styleElement); } appendStyle("baseClass", "invalidClass", inputStyle);
body { background-color: #eee; }
<input class="baseClass" placeholder="placeholder"> <input class="baseClass invalidClass" value="hello">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.