|
calc是CSS3中的一个用于在运行时计算属性值的函数,
函数的参数里可以使用表达式,支持 + - * /等算术运行,例如在CSS中指定高度属性可以这样写
- div.cls{
- height:calc(100% - 5px);
- }
复制代码 要注意 + - * /两边一定要有空格,不能写为 calc(100%-5px); 在标准的content-box盒模型下,如果宽度为100% - 且指定边框边距等可能就会撑破页面,这时候就可以使用 calc函数在运行时计算出自适应的合适宽度。
在HTMLayout中calc还能象CSSS!脚本那样访问DOM节点对象的方法和属性。例如:
[element.]children() - 返回子节点数
[element.]child(n:integer) - 返回子节点,参数为起始于1的数组索引值
[element.]next() - 返回下一个兄弟节点
[element.]previous() - 返回上一个兄弟节点
[element.]parent() - 返回父节点
[element.]text-width("文本内容") - 返回当前节点在当前样节下文本的显示长度
[element.]min-intrinsic-width(), [element.]max-intrinsic-width() - 节点内容的最大宽度
[element.]min-intrinsic-height(), [element.]max-intrinsic-height() -节点内容的最大高度
[element.]system-scrollbar-width(),[element.]system-scrollbar-height() - 系统滚动条的宽度或高度
[element.]system-border-width() - 系统边框宽度
[element.]system-small-icon-width(),[element.]system-small-icon-height() - 系统小图标的显示宽度或高度
[element.]foreground-image-width(),[element.]foreground-image-height() - 当前前景图宽度,高度
[element.]background-image-width(),[element.]background-image-height() - 当前背景图宽度,高度
CSS选择器函数:
element.$( selector ) - 返回所有符合该选择器的节点数组. 选择器中可以使用:root表示当前节点
element.$1( selector ) 同上但返回第一个匹配节点
element.$p( selector ) - 向上查询所有符合选择器的工 :root 表示页面根节点
element.$1p( selector ) -同上但返回每一个匹配节点
一个简单的示例:
- div {
- width:calc( min-intrinsic-width() );
- }
复制代码 你可能会说,直接写 div { width:min-intrinsic } 不是更简单么?!
calc() 在括号里面不仅仅是可以写简单的函数调用,还支持一些更复杂的表达式,请看一个完整的示例:
- import win.ui;
- /*DSG{{*/
- var winform = win.form(text="HTMLayout calc()表达式测试";right=599;bottom=399)
- /*}}*/
- import web.layout;
- var wbLayout = web.layout( winform )
-
- wbLayout.html = /**
- <html #test>
- <head>
- <style>
-
- button.with-text {
- border:1px solid red;/*红色边框*/
- width: calc(
- max( text-width( self.child(1):value ),text-width( self.child(2):value ) )
- );
- }
-
- button.with-text:checked > text:nth-child(1) {
- display:none;
- }
-
- button.with-text:not(:checked) > text:nth-child(2) {
- display:none;
- }
- </style>
- </head>
- <body>
- <button .with-text type="checkbox">
- <text>请勾选复选框试一下效果 </text>
- <text>现在勾选了</text>
- </button>
- </body>
- </html>
- **/
- winform.show();
- win.loopMessage();
复制代码 注意上面源码中这段CSS代码:
width: calc(
max( text-width( self.child(1):value ),text-width( self.child(2):value ) )
);
首先使用 self.child(1):value, self.child(2):value 分别取到这两个节点的文本值,
然后使用 text-width( 文本值 ) 分别计算出这两段文本的显示宽度。
最后使用 max( 文本1宽度,文本2宽度 ) 取最大值返回。
calc()表达式仅仅是CSSS!语法的一个子集,并不能支持所有的CSSS!语法( 例如 a ? b # c 即不支持 )
因为CSSS!里的assigned!事件在CSS应用到节点时会立即执行,所以上面的calc() 表达式也可以用等价的CSSS!代码来写,如下:
button.with-text {
assigned!: self::width =
max( self.text-width( self.child(1):value ),self.text-width( self.child(2):value ) )
;
}
所以 calc() 实际上是一种缩写的CSSS!的表达式。
参考链接:
http://www.terrainformatica.com/htmlayout/csss!-calc-function.htm |
评分
-
查看全部评分
|