当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS的expression使用简介

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 CSS的expression使用简介


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 46 ::
收藏到网摘: n/a

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对浏览器资源要求比较高。