艺术迷(fansart.com) 首页 收藏本站 RSS频道
艺术迷首页 -> 网页设计 -> CSS中expression使用简介--css样式
2006-4-28   作者:   来源:互联网   点击:1357
页面功能: 【评论】有错就点】 【字体: 】 【打印】 【关闭【收藏本页】
css样式详细介绍,CSS中expression使用简介
定义
  IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

  给元素固有属性赋值

  例如,你可以依照浏览器的大小来安置一个元素的位置。

#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 "px");
top: expression(document.body.offsetHeight - 110 "px");
background: red;
}

  给元素自定义属性赋值

  例如,消除页面上的链接虚线框。 通常的做法是:

<a href="link1.htm" onfocus="this.blur()">link1</a>
<a href="link2.htm" onfocus="this.blur()">link2</a>
<a href="link3.htm" onfocus="this.blur()">link3</a>

  粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl C,Ctrl V么,何况两者一比较,哪个产生的冗余代码更多呢?

  采用expression的做法如下:

<style type="text/css">
a {star : expression(onfocus=this.blur)}
</style>
<a href="link1.htm">link1</a>
<a href="link2.htm">link2</a>
<a href="link3.htm">link3</a>

  说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改,你可能想当然的会认为应该写为

<style type="text/css">
input
{star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<style type="text/css">
input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";
onmouseout=this.style.backgroundColor="#FFFFFF")}
</style>
<input type="text">
<input type="text">
<input type="text">

  可结果却是出现脚本出错,正确的写法应该把CSS样式的定义写进函数内,如下所示:

<style type="text/css">
input {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>
<input type="text">
<input type="text">
<input type="text">

  注意

  不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。

页面功能: 【评论】有错就点】 【字体: 】 【打印】 【关闭【收藏本页】
声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。如有疑问请与站长联系。
网友评论
目前没有评论!
发表评论
您的姓名: 匿名发送
电子邮件:
评论内容:
不能超过100个字符



所有留言只代表网友个人观点,不代表本站观点。
请各位遵纪守法并注意语言文明。
新闻搜索
关 键 词:
搜索范围:
全站精华
图文精彩
新锐CG插画
【2006-4-26 14:27:13】
新锐CG插画 Monday to Friday
水木清华地产广告欣赏[图]--平面广告
【2006-4-26 9:31:54】
水木清华地产广告欣赏
万科西山庭院.格.沉.尊[图]--平面广告
【2006-4-21 9:08:35】
万科西山庭院.格.沉.尊
泊林花园推广故事绘本(2)[图]--CG插画
【2006-4-20 11:43:23】
泊林花园推广故事绘本(2)
泊林花园推广故事绘本(1)[图]--CG插画
【2006-4-20 11:34:33】
泊林花园推广故事绘本(1)
溯源居广告欣赏--小红人[图]--平面广告
【2006-4-14 14:45:57】
溯源居广告欣赏--小红人
cg插画欣赏[图]--CG插画
【2006-4-14 9:21:18】
cg插画欣赏
yashasi插画作品欣赏[图]--CG插画
【2006-4-13 18:32:29】
yashasi插画作品欣赏
北邦插画欣赏(1)[图]--CG插画
【2006-4-13 9:49:02】
北邦插画欣赏(1)
高傲的玫瑰-温碧霞[图]--摄影艺术
【2006-4-12 8:58:34】
高傲的玫瑰-温碧霞
国粹京剧脸谱表情[图]--界面设计
【2006-4-11 17:51:33】
国粹京剧脸谱表情
回忆紫禁城里那些逝去的[图]--中国艺术
【2006-4-11 16:34:31】
回忆紫禁城里那些逝去的
非常可爱的儿童插画(1)[图]--CG插画
【2006-4-11 15:59:16】
非常可爱的儿童插画(1)
荷兰著名画家Anton
【2006-4-11 15:49:41】
荷兰著名画家Anton Pieck插画
美国插画师kevindart作品[图]--CG插画
【2006-4-11 15:37:32】
美国插画师kevindart作品
美国插画师kevindart作品(1)[图]--CG插画
【2006-4-11 15:34:43】
美国插画师kevindart作品(1)