Javascript JSON CSS解析器
我的递归函数正在中断,我无法找出原因。我正试图用裸骨javascript编写一个json到css的解析器,但似乎无法理解为什么我的函数不能工作。谁能帮我一把吗 在css中,您会得到一些元素,这些元素是您正在使用类似这样的东西来寻址的特定元素的子元素Javascript JSON CSS解析器,javascript,css,json,parsing,recursion,Javascript,Css,Json,Parsing,Recursion,我的递归函数正在中断,我无法找出原因。我正试图用裸骨javascript编写一个json到css的解析器,但似乎无法理解为什么我的函数不能工作。谁能帮我一把吗 在css中,您会得到一些元素,这些元素是您正在使用类似这样的东西来寻址的特定元素的子元素 #nav li{ some style here } 试图在javascript中操作相同的东西,但它不起作用。到目前为止,我的代码对于简单的选择器工作良好 var json = { "body" : { "backgr
#nav li{
some style here
}
试图在javascript中操作相同的东西,但它不起作用。到目前为止,我的代码对于简单的选择器工作良好
var json = {
"body" : {
"background": "#303030",
"color": "#FFFFFF",
"font-family": "Arial, Helvetica, sans-serif"
},
"#nav": {
"li": {
"display": "inline-block",
"list-styles": "none",
"margin-right": "10px",
"padding": "10px, 10px"
}
}
}
// How to use:
// json is an obj
// body is a selector
// background is a property belong to a selector
// #303030 is a value for the property
//apply css changes to document without writing any css
//by default the first values are
// selector = background
// parent = document
// object = json
function styleApply(selector, parent, object){
var element, onSelector, signal;
//checks the first character of the selector and grabs element from page depending on what type of element it is
switch(selector[0]){
case ".":
element= parent.getElementsByClassName(selector.substring(1));
newParent = element[0]; //checks to see what is in the first index of the obtained element
break;
case "#":
element= parent.getElementById(selector.substring(1));
newParent = element;
break;
default:
element= parent.getElementsByTagName(selector);
newParent = element[0];
break;
}
//only works if there is actually an element in the page corresponding with the selector
if(newParent != null){
//loops through all elements with the same selector or in the case of id just does one loop
for(var i=0; i<element.length; i++){
//loops through all properties in the selector
for (var property in object[selector]){
//grabs the associated value with the selector could be string or object
var value= object[selector][property];
//if it is a string it is a style, if it is an object, it is targeting the elements inside the current selector only
if(typeof(value) === "string"){
element[i].style.setProperty(property, value);
}else{
/*I am breaking my code right here*/
//reusing the same function, this time selector is equal to property for the case of nav, it is the element 'li'
//newParent is the element who is a parent of the current element (e.g 'nav' is parent of 'li')
//value is the new object that is replacing json,
styleApply(property, newParent, value); //since value is an object it did not pass the string test and now the new object is value
/*Problem ends here */
}
}
}
}
}
my code for looping over all the values in json
for (var selector in json){
styleApply(selector, document, json);
}
var json={
“正文”:{
“背景”:“303030”,
“颜色”:“FFFFFF”,
“字体系列”:“Arial、Helvetica、无衬线”
},
“#导航”:{
“李”:{
“显示”:“内联块”,
“列表样式”:“无”,
“边距右”:“10px”,
“填充”:“10px,10px”
}
}
}
//如何使用:
//json是一个obj
//身体是一个选择器
//背景是属于选择器的属性
//#303030是该属性的值
//将css更改应用于文档而不编写任何css
//默认情况下,第一个值是
//选择器=背景
//父项=文档
//object=json
函数样式应用(选择器、父级、对象){
无功元件、选通元件、信号;
//检查选择器的第一个字符,并根据元素的类型从页面中获取元素
开关(选择器[0]){
案例“.”:
element=parent.getElementsByClassName(selector.substring(1));
newParent=element[0];//检查获取的元素的第一个索引中有什么内容
打破
案例“#”:
element=parent.getElementById(selector.substring(1));
newParent=元素;
打破
违约:
element=parent.getElementsByTagName(选择器);
newParent=元素[0];
打破
}
//仅当页面中实际存在与选择器对应的元素时才有效
如果(newParent!=null){
//使用相同的选择器遍历所有元素,或者在id的情况下只执行一个循环
对于(var i=0;i
这是一段关于将json解析为css的简短代码,我想尝试一下
--选择器是指用json编写的css选择器
--父对象开始引用javascript中文档对象模型中的文档
--对象是传入的json对象
如果我误用了任何术语,请再次纠正我
函数样式应用(选择器、父对象、对象){
无功元件、选通元件、信号;
开关(选择器[0]){
案例“.”:
element=parent.getElementsByClassName(selector.substring(1));
打破
案例“#”:
元素=[parent.getElementById(selector.substring(1))];
打破
违约:
element=parent.getElementsByTagName(选择器);
打破
}
if(元素[0]!=null){
对于(var i=0;i我只是碰巧研究了json,以编写比直接将字符串和数字连接在一起更干净的css。我没有将样式直接应用于每个元素,而是将它们放入
元素中,这样在页面的整个生命周期中更容易更改。它还能够针对伪元素,例如s:以前,我用过
无论如何,函数如下:
// convert json to css
function jsonToCss(obj) {
var x, finalStr=''
for (x in obj) {
var y, decStr=''
for (y in obj[x]) {
decStr+= y + ':' + obj[x][y] + ';'
}
finalStr+= x + '{' + decStr + '}'
}
return finalStr
}
由于函数只在两个级别(一个用于选择器,一个用于声明)递归,因此需要按如下方式修改json:
var json = {
"body" : {
"background": "#303030",
"color": "#FFFFFF",
"font-family": "Arial, Helvetica, sans-serif"
},
"#nav li": {
"display": "inline-block",
"list-styles": "none",
"margin-right": "10px",
"padding": "10px, 10px"
}
}
将其输入函数,您将得到以下字符串:
body{background:#303030;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;}#nav li{display:inline-block;list-styles:none;margin-right:10px;padding:10px, 10px;}
然后可以将其放入样式元素中。我还没有验证函数生成的字符串是否格式正确,但它在我这方面运行得很好。getElementById
返回单个元素,而不是集合。需要将其包装在数组中。递归调用函数时,需要传递元素[I]
作为新的父项,而不是新的父项
。非常感谢Barmar,我成功地缩短了我的代码,让继承人工作了!感谢xbonez检查了我的工作。我做的一个额外更改是我的value=object[selector]我需要返回一个参数来复制我的jsonObject的结构,迭代顺序依赖于实现,浏览器对此不可靠,因此这种方法无法与顺序很重要的css规则保持一致
body{background:#303030;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;}#nav li{display:inline-block;list-styles:none;margin-right:10px;padding:10px, 10px;}