target="\_blank" rel="nofollow noopener noreferrer"

在 htmlayout 的 css 中支持自定义 CSS 常量，这给我们做界面设计带来了更多可能。

了解过 less 的童鞋，应该对 CSS 常量定义非常熟悉。

需求分析：更换皮肤一般是需要改变界面的颜色、图片、样式，

而在 htmlayout 中绝大部分内容都可以使用 css 来控制，非常酷！

步骤：

首先我们来建立一个 red.css，用来存储红色皮肤需要的样式：

@const BGROUND: RED；   //定义背景色

@const   BORDER1, BORDER2 : 5px solid #FF0000;  //定义两个边框色

@const MY\_HATCH\_BACKGROUND  : repeat url(sb-scroll-base.png);  //定义滚动条图片

@const WIDTH\_EXPR: calc( 50% + 40px);  //定义宽度数值

@const INITIAL\_TEXT: "RED SKIN";       //定义文本内容

同样的方法在定义 blue.css 用来存储蓝色皮肤需要的样式：

@const BGROUND: BLUE；   //定义背景色

@const   BORDER1, BORDER2 : 5px solid #FFFF00;  //定义两个边框色

@const MY\_HATCH\_BACKGROUND  : repeat url(sb-scroll-base2.png);  //定义滚动条图片

@const WIDTH\_EXPR: calc( 50% + 40px);  //定义宽度数值

@const INITIAL\_TEXT: "BLUE SKIN";       //定义文本内容

然后在建立个 master.css 用来存储真个界面框架的样式：

这里存放一些不需要改动的样式，同时引用常量值来加载 skin 样式。

body{background：@BGROUND;}

div{border:@BORDER1;}

最后通过 HTML 来引入 master.css 和默认皮肤样式 red.css

辣么 OK，现在我们只需要将 red.css 替换成 blue.css 就可以实现换肤的要求了！

实现代码：


var css= $1("#redskin")       //通过 ID 选择 css

css.href = "skin/blue.css"    //替换 href 属性的值

css.xcall("activate")             //刷新界面

PS:

css 常量定义规则：@const 常量,常量… : 值 ;

引用常量： css 属性名:@常量名；

同时：在 css 中引入其他 css 文件可以使用：

@import url(treeview.css) screen;

是不是很 so easy？

…..

最后通过 HTML 来引入 master.css 和默认皮肤样式 red.css