CSS中expression属性如何使用
更新:HHH   时间:2023-1-7


CSS中expression属性如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

CSS expression属性作用

1、给元素固有属性赋值

下面的实例是依照浏览器的大小来安置一个元素的位置。查看运行效果试试。

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>www.52css.com</title> <styletypestyletype="text/css"> <!--  #myDiv{  position:absolute;  width:100px;  height:100px;  background:#c00;  left:expression(document.body.offsetWidth-180+"px");  top:expression(document.body.offsetHeight--80+"px");  text-align:center;  line-height:90px;  color:#fff;  }  --> </style> </head> <body> <dividdivid="myDiv">52css.com</div> </body> </html>

[可先修改部分代码再运行查看效果]

2、给元素自定义属性赋值

我们想给页面的链接消除点击时产生的虚线。

在一般情况下,我们是这样做的:

ExampleSourceCode

<ahrefahref="link1.htm"onfocus="this.blur()">52css.com</a><br/> <ahrefahref="link2.htm"onfocus="this.blur()">52css.com</a><br/> <ahrefahref="link3.htm"onfocus="this.blur()">52css.com</a>

粗看或许没有感觉。但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,采用expression的优势现在就突现出来了。两者比较,哪个产生的冗余代码更多呢?

  ◆采用expression的做法如下: 

 a{star:expression(thisthis.onFocus=this.blur())}

我们看下面的例子:

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>www.52css.com</title> <styletypestyletype="text/css"> <!--  a{star:expression(this.onFocus=this.blur())}  --> </style> </head> <body> <ahrefahref="#">我爱CSS-www.52css.com</a> </p> </body> </html>

关于CSS中expression属性如何使用问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注天达云行业资讯频道了解更多相关知识。

返回web开发教程...