如何从JSON导入全局CSS在阵营

问题描述：

"A": { 
    "color": "#FF0000" 
    }, 
    "B": { 
    "color": "#006600" 
    },

线的东西。我想将其转换为CSS，例如

.A { color : #FF0000} 
.B {...}

然后加载它以便在我的应用程序中全局使用。我怎样才能做到这一点？我发现的所有其他解决方案都需要从文件加载，或指定应用cssFile.class属性。 JSON中有不确定数量的样式。

只是一个供参考，但'.A { “颜色”： “FF0000”}'是无效的CSS。它需要是'.A {color：＃FF0000;}'。 API提供的这些样式规则有多广泛？数据需要转换，如果只是简单地将字符串“FF0000”转换为颜色“＃FF0000”，应该很容易。任何更多的参与，这将是非常困难的。 –

@JosephMarikle你是对的，我已经解决了。样式规则将非常简单，但可以有任意数量。 – ahota

您是否考虑到'.A'只能有一个样式规则？您不能拥有同名对象的两个属性。 –

答

主要是，你会想要使用for..in，所以你可以遍历对象的属性。你会为类和类属性做这个。那么这只是构建正确语法的问题;将其添加到<style>元素，我们将以编程方式创建;并将其注入文档<head>。

var data = { 
 
    "A": { 
 
    "color": "#FF0000" 
 
    }, 
 
    "B": { 
 
    "color": "#006600" 
 
    } 
 
}, rules = []; 
 

 

 
for(var i in data) { 
 
    var rule = `.${i}{`; 
 
    for(var j in data[i]) { 
 
    rule += `${j}:${data[i][j]};`; 
 
    } 
 
    rule += `}`; 
 
    rules.push(rule); 
 
} 
 

 
var injectedStyles = document.createElement('style'); 
 
injectedStyles.setAttribute('type', 'text/css'); 
 
injectedStyles.innerHTML = rules.join(''); 
 

 
document.head.appendChild(injectedStyles);

<p class="A">This should be red</p> 
 
<p class="B">This should be dark green</p> 
 
<p class="C">This should be the default text color</p>

谢谢！这完美的作品！ – ahota

如何从JSON导入全局CSS在阵营

相关推荐