Flex中的CSS： （3）CSS会被编译器转换为什么样的AS代码

阅读： 评论：0

Flex中的CSS： （3）CSS会被编译器转换为什么样的AS代码

解说：

s|Button#btn, .MyStyle 这种用逗号分隔形式的CSS定义体实际上是多个定义的组合。即

s|Button#btn

{。。。}

.MyStyle

{。。。}

<?xml version="1.0" encoding="utf-8"?> <!-- l --> <s:Application xmlns:fx="" xmlns:mx="library://ns.adobe/flex/mx" xmlns:s="library://ns.adobe/flex/spark"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Style> @namespace s "library://ns.adobe/flex/spark"; @namespace mx "library://ns.adobe/flex/mx"; s|Button#btn,.MyStyle{ font-size:20px; } </fx:Style> <fx:Script> <![CDATA[ public function showSelectors():void { var selectors:Array = styleManager.selectors; = "所有的选择器列表如下(" + selectors.length + ")n"; for (var i:int = 0; i < selectors.length; i++) { += "n" + selectors[i]; } } ]]> </fx:Script> <s:Group id="group1" width="511" height="396"> <s:TextArea id="msg" x="1" y="28" width="100%" height="359"/> <s:Button id="btn" label="Show Selectors" click="showSelectors()"/> </s:Group> <s:Group id="group2" width="511"> <s:Button label="test" click="showSelectors()" styleName="MyStyle"/> </s:Group> </s:Application>

执行结果：

编译器自动生成代码：

var conditions:Array; var condition:CSSCondition; var selector:CSSSelector; selector = null; conditions = null; conditions = []; condition = new CSSCondition("id", "btn"); conditions.push(condition); selector = new CSSSelector("sparkponents.Button", conditions, selector); // sparkponents.Button#btn style = StyleDeclaration("sparkponents.Button#btn"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.fontSize = 20; }; } selector = null; conditions = null; conditions = []; condition = new CSSCondition("class", "MyStyle"); conditions.push(condition); selector = new CSSSelector("", conditions, selector); // .MyStyle style = StyleDeclaration(".MyStyle"); if (!style) { style = new CSSStyleDeclaration(selector, styleManager); } if (style.factory == null) { style.factory = function():void { this.fontSize = 20; }; }

可见，这种形式定义的CSS和分开定义的结果是完全相同的。

本文发布于:2024-02-04 10:57:38，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170705605654959.html

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

上一篇：13css语法——带@的规则

下一篇：js抓取list中item的html,JS基础篇

标签：编译器   转换为   代码   Flex   CSS