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

赞 (0)

相关推荐

  • CSS的expression使用简介

    IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas?cript表达式关联起 来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性. CSS属性后面可以是一段Javas?cript表达式,CSS属性的值等于 Javas?cript表达式计算的结果.?在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象.这个表达式就好像是在这个元素的一 个成员函数中一样. 给元素固有属性赋值 例如,你可以依照浏览器的大小来安置一个元素的位置. #myDiv

  • JavaScript和CSS通过expression实现Table居中显示

    JavaScript和CSS通过expression实现Table居中显示

    上篇博客说的是将div设置为居中显示,今天来分享一下如何将表格居中的显示.至于居中的原理就不说了,可以看一下我的上篇博客,这次没有使用window的两个事件,而是使用一个叫expression的函数.现在多数的浏览器都支持这个函数.在写上一篇博客的时候,我脑里想能不能把计算后的值赋给css的left和top属性呢?后来查阅资料找到了这个函数.这个函数用来把CSS属性和JavaScript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义的属性.就是说CSS属性后面可以是一段Ja

  • Css利用js的expression实现的效果

    IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果. 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象.这个表达式就好像是在这个元素的一个成员函数中一样. 给元素固有属性赋值 例如,你可以依照浏览器的大小来安置一个元素的位置. #myDiv 

  • expression将JS、Css结合起来

    IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果. 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象.这个表达式就好像是在这个元素的一个成员函数中一样. 给元素固有属性赋值 例如,你可以依照浏览器的大小来安置一个元素的位置. #myDiv

  • css样式之区分input是按钮还是文本框的方法第1/4页

    当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:<input type="text" /> 文本框 <input type="password" /> 密码框 <input type="submit" />

  • jQuery实现可兼容IE6的滚动监听功能

    jQuery实现可兼容IE6的滚动监听功能

    本文实例讲述了jQuery实现可兼容IE6的滚动监听功能.分享给大家供大家参考,具体如下: 其实这东西本打算用原生的javascript来写,但是原生的javascript取class与监听滚动条的滚动过于麻烦,因此上了jQuery,没关系,反正兼容IE6就行. 将实现如下的效果: 也就是在网页中有点常见的滚动监听.相应的标题,滚到哪里,则左边的滚动条当前标题前的...就变成>>>,,当然了,左边的标题同样是可以点击,马上滚到该滚的地方. 首先是网页布局部分,代码如下,请忽略大堆的Jav

  • js完美解决IE6不支持position:fixed的bug

    先来看段代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #

  • JAVASCRIPT THIS详解 面向对象

    虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScript也提供了这个this关键字,不过用起来就比经典OO语言中要"混乱"的多了.下面就来看看,在JavaScript中各种this的使用方法有什么混乱之处? 1.在HTML元素事件属性中inline方式使用this关键字: <div onclick=" // 可以在里面使用this ">division element</div> 我们一般比较常用的方法

  • JScript中正则表达函数的说明与应用

    作为模式匹配下文本替换.搜索.提取的强有力工具,正则表达式(Regular Expression)的应用已经从unix平台逐渐渗入到网络开发中了,作为服务器端/客户端的脚本开发语言JScript,正越来越多将正则表达式应用融入其中,以弥补自身在文本上处理能力的不足.在此,我们以JScript5.5版本为例,对其中的正则表达式的应用作一个概述. 首先我们需要区分JScript中关于正则表达式的两个对象:Regular Expression对象和RegExp对象. 前者仅包含一个特定的正则表达式实例

  • IE9+已经不对document.createElement向下兼容的解决方法

    今天发现某网站上,IE9和chrome中页面的功能居然有差异,于是在IE9下打开console,发现一堆js报错,用fiddler跟踪了一下,原来代码里有一句是这样的: if(ie){ var iframe = document.createElement('<iframe src="http://www.jb51.net"></iframe>'); } 是的,问题就出在这里:DOM Exception: INVALID_CHARACTER_ERR (5) 因为

随机推荐