有时动态设置元素的inline style也是很有必要的,因为它有一些CSS没有的优点:

• inline style不会产生子属性继承
• 利用inline style优点级,改变CSS属性(important除外)

该Parser的一些特点:

1. 以元素+规则字符串作为输入,以改变元素style样式作为输出

2. 定义一系列规则,由规则改变当前Parser状态

3. 规则可以嵌套

4. 规则可自定义

由以上功能可看出,只要定义了一些元规则,就可以产生一个强大的规则解析器.

结合CSS的一些特性,现在将这些规则具体化

rule -> rule S rule
rule -> prefix text
S -> /\s+/
prefix -> -        //应用样式到首层子元素
prefix -> $      //样式只对Border Box的浏览器有效
prefix ->.        //标记样式作为css类加入
text -> name|name=value        //名称,或配有值的名称
name -> /\S+/           //规则名称
value -> /\S+/          //最终应用值

现在把name=value作为一个对象的属性键值存储,就形成一个规则的集合
当text -> name|name=value,只有name而没值时就从这集合中取出值来.

好了,描述有了,举个例子

var ruleSet = {
“1c” : ["width","100%"],
“2c” : ["width","50%"],
“3c” : ["width","30%"],
“np” : ["padding","0px"],
“bdr” : ["border","0px"],
‘fl’ : ["float", 'left'],
‘cls’:['clear', 'both'],
‘cascade’:'1c np fl cls’
};

如 ‘bdr=3 cascade’对应的的CSS样式为

{
width:50%;
padding:0px;
border :3px;
float:left;
clear:both;
}

例如只针对非Border Box模型有效的浏览器应用
‘$bdr=2′

例如针对非Border Box模型有效的浏览器元素所有首层子元素应用
‘-$bdr=2′

例如给元素添加css类
‘-$bdr=2 .class_a .class_b’

扩展方面,可对上面的一些方法描述进行扩展,使得规则定义得更加强大

在prefix层,可定义多样过滤符号

在value层,可定义value类型不仅仅是”值”,还可以是一个函数,真正值由函数实时计算后返回;value也还可以是一个JS对象,批量设置element.style的属性对等.

这个Style Parser功能强大,实现起来也简单,不失为把问题简单化处理的一个好方法.

可以把这Style Parser挂到jQuery对象或其它元素封装过的对象上,最终形式类似:

element.parse(’bdr=3 $cascade’);

这一句就可以应用到下面的样式:

{
border :3px;
/**以下是border box模型适用*/
width:50%;
padding:0px;
float:left;
clear:both;
}

该CSS Parser已应用到Cicy JS库中,对于表单的设计挺方便.

• 上一篇: 遇到一个Firefox,Chrome盒模型解析”自相矛盾”的问题