CSS中的css expressionn就是将js的结果转到CSS值中吗?

IE css expression中获取scrollTop属性
  今天在做一个浮动效果,由于IE6-不支持position:fixed,所以就对IE6-浏览器可以考虑使用IE专有css行为expression+position:absolute来实现。下面的代码全部在IE6-浏览器下测试。
  HTML结构
&div class=&ieexp&&浮动层&/div&
  开始定义样式如下
.ieexp{top:expression(document.body.scrollTop);left:0}
  结果发现浮动层在IE下固定在了顶部,不会随着页面的滚动而移动。修改为下面css查看在expression中document.body.scrollTop的值
.ieexp{top:expression(document.title=document.body.scrollTop);left:0}
发现在expression中document.body.scrollTop尽然是0,一直没变过。再次更改css样式如下
.ieexp{top:expression(document.title=this.offsetParent.scrollTop+'|'+this.offsetParent.tagName);left:0}
页面标题栏显示实际的页面的滚动scrollTop属性|HTML,this.offsetParent到底是什么可以参考
.ieexp{top:expression(this.offsetParent.scrollTop);left:0}
  这次没问题了,在IE6可以滚动。
  但是奇怪为什么直接设置成document.body.scrollTop不能实时获取到滚动头的距离呢。后面在网上找到一个示例,使用了eval动态执行代码后可以返回scrollTop属性,晕了。。
.ieexp{top:expression(eval(document.body.scrollTop));left:0}
  还有一个细节需要注意,如果增加了xhtml申明,就是=='CSS1Compat'时,需要将document.body.scrollTop修改为document.documentElement.scrollTop。
原创文章,转载请注明出处:
阅读(158)喜欢(0)不喜欢(0)分类:
上一篇:下一篇:CSS中expression使用简介
下面图老师小编跟大家分享CSS中expression使用简介,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~
  IE5及其以后版本支持在中使用expression,用来把CSS属性和s cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他对象。这个表达式就好像是在这个元素的一个成员函数中一样。   给元素固有属性赋值  例如,你可以依照浏览器的大小来安置一个元素的位置。#myDiv {position:width: 100height: 100left: expression(document.body.offsetWidth - 110 + "px");top: expression(document.body.offsetHeight - 110 + "px");background:}  给元素自定义属性赋值  例如,消除页面上的链接虚线框。 通常的做法是:a href="link1.htm" onfocus="this.blur()"link1/aa href="link2.htm" onfocus="this.blur()"link2/aa href="link3.htm" onfocus="this.blur()"link3/a   粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?  采用expression的做法如下: style type="text/css"a {star : expression(onfocus=this.blur)}/stylea href="link1.htm"link1/aa href="link2.htm"link2/aa href="link3.htm"link3/a   说明:里面的star就是自己任意定义的属性,你可以随自己喜好另外定义,接着包含在expression()里的语句就是脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意,如果触发的特效是CSS的属性变化,那么出来的结果会跟你的本意有差别。例如你想随的移进移出而改变页面中的文本框更改,你可能想当然的会认为应该写为 style type="text/css"input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";onmouseout=this.style.backgroundColor="#FFFFFF")}/stylestyle type="text/css"input {star : expression(onmouseover=this.style.backgroundColor="#FF0000";onmouseout=this.style.backgroundColor="#FFFFFF")}/styleinput 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"}) }/styleinput type="text"input type="text"input type="text"   注意  不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。
来源:/n/3573.html
热门搜索:
PS照片转手绘素描教程
本地连接受限制或无连接怎么办
如何使用WPS文字将图片背景设置为透明色
PS教程 PS绘制另类矩形效果步骤图
一提到痛经,姐妹们都苦不堪言,甚至咬牙切齿说恨下辈子投胎不要再做女人了!其实,痛经可分为原发性痛经和继发性痛经两种,原发性痛经是周期性月经期痛但没有器质性疾病,而继发性痛经常见于一些妇科疾病。痛经常为绞痛并伴有下背部痛、恶心、呕吐、头痛或腹泻,会影响女性朋友正常的活动,需要借助药物进行治疗。姐妹们赶紧学会快速治疗法,赶跑这该死的痛经吧!
很多女性都会有痛经、月经不调等经期烦恼。经期不适多半是由于体质虚寒造成,我们可以多吃温性食物,以及血红蛋白丰沛的食物,来起到补血暖胃的效果。那么,经期吃什么对身体最好呢?今天,我们就来探讨下这个问题!
刚刚过完十一假期,很多人由于在节假日的时候没有注意皮肤的护理,假期一结束就出现了痘痘、黑眼圈、皮肤暗沉等问题肌肤,那么,我们应该怎么护理呢?下面就给大家来介绍护理方法吧。
人们在日常生活中经常在无意中收到外伤,造成了体内毛细血管破裂,使得皮肤表现出红色的斑点,但是,有些皮下出血是因为其他的原因引起的,下面给大家介绍以下有哪些使得皮下出血的原因。
今日北京时间凌晨苹果召开新品发布会,iPhone 7和iPhone 7 Plus正式登台亮相,中国在首发之列,iPhone7起售价为5388元,iPhone7 Plus起售价为6388元,iphone7各项性能创新升级也让那些果粉们早就跃跃欲试了吧,而此次中国大陆的iPhone 7/7 Plus将在9月9日下午3:01正式开启预售,9月16日将正式开卖。现在万事俱备,只欠“割肾”,果粉们,Are you ready?
火影是笔者非常喜欢的一个动漫,同时火影的游戏也有很高的可玩性,对于新手玩家首先要了解火影忍者究极风暴3出招表,下面我就来教大家这款游戏里一些招式,喜欢这个游戏的玩家不妨来看看。
微信的普遍使用也让很多不法分子盗取个人隐私信息,很多人因此想要注销自己的微信号,首先需要告诉大家的是依照腾讯微信使用规定微信账号是无法注销解除的,下面我来教你怎么最大限度包含您的隐私。
炎夏烈日炎炎,就在你与阳光亲密接触时,也让紫外线有了可乘之机,有的时候,虽然你认真做了防晒的工作,却依旧没能躲过炙热的阳光,晒伤之后,要立马着手修复晒伤的肌肤,那么晒伤后怎么处理呢?下面就一起来看看吧。
脸上肉嘟嘟的女生和男生们是不是选择发型的时候很伤大脑。没关系,我们这里肯定有一款适合你的发型,本文也是大圆脸一枚,下面分享下我收集多年的圆脸女生男生发型以及学会的圆脸发型修饰技巧。
孕妇能吃西瓜吗?面对炎炎夏暑的到来,西瓜作为夏季最常见的水果之一,已经成了人们必吃的解暑水果,作为特殊人群的孕妈妈们也馋的直流口水了,那么问题来了,孕妇到底可以吃西瓜吗?下文为你详解。
如果您有什么好的建议或者疑问,可以联系我们! QQ群: QQ号: 进群、加好友,备注:图老师 小周老师一一为您解答!让我们一起学习、一起进步 版权所有 (C) 2016 All Rights Reserved. 湘ICP备号
微信公众号原文 :/longhubo/blog/item/f2da4b58c568add29d820466.html
-moz-user-select:
hutia:expression(this.onselectstart=function(){return(false)});
CSS中expression使用简介
IE5及其以后版本支持在中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里之CSS属性可以是元素固有之属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性之值等于Javas cript表达式计算之结果。在表达式中可以直接引用元素自身之属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素之一个成员函数中一样。
  给元素固有属性赋值
  例如,你可以依照浏览器之大小来安置一个元素之位置。
width: 100
height: 100
left: expression_r(document.body.offsetWidth - 110 + &px&);
top: expression_r(document.body.offsetHeight - 110 + &px&);
background:
  给元素自定义属性赋值
  例如,消除页面上之链接虚线框。 通常之做法是:
&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_r(onfocus=this.blur)}
&a href=&link1.htm&&link1&/a&
&a href=&link2.htm&&link2&/a&
&a href=&link3.htm&&link3&/a&
  说明:里面之star就是自己任意定义之属性,你可以随自己喜好另外定义,接着包含在expression_r()里之语句就是JS脚本,在自定义属性与expression之间可别忘了还有一个引号,因为实质还是CSS,所以放在style标签内,而非s cript内。OK,这样就很容易之用一句话实现了页面中之链接虚线框之消除。不过你先别得意,如果触发之特效是CSS之属性变化,那么出来之结果会跟你之本意有差别。例如你想随鼠标之移进移出而改变页面中之文本框颜色更改,你可能想当然之会认为应该写为
&style type=&text/css&&
{star : expression_r(onmouseover=this.style.backgroundColor=&#FF0000&;
onmouseout=this.style.backgroundColor=&#FFFFFF&)}
&style type=&text/css&&
input {star : expression_r(onmouseover=this.style.backgroundColor=&#FF0000&;
onmouseout=this.style.backgroundColor=&#FFFFFF&)}
&input type=&text&&
&input type=&text&&
&input type=&text&&
  可结果却是出现脚本出错,正确之写法应该把CSS样式之定义写进函数内,如下所示:
&style type=&text/css&&
input {star : expression_r(onmouseover=function()
{this.style.backgroundColor=&#FF0000&},
onmouseout=function(){this.style.backgroundColor=&#FFFFFF&}) }
&input type=&text&&
&input type=&text&&
&input type=&text&&
  不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:107293次
积分:1549
积分:1549
排名:第19443名
原创:44篇
转载:42篇
(1)(9)(1)(4)(3)(3)(1)(3)(2)(1)(17)(1)(7)(22)(3)(2)(7)&&&&&&&&&&&&&&&&&&
posts - 40,comments - 25,trackbacks - 0
&!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN"&&HTML&&HEAD&&TITLE& CSS样式里使用JavaScript(onmouseover/onmouseout) &/TITLE&&style type="text/css"&li{cursor:border:1px solid #/*设置onmouseover事件*/onmouseover:expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow';this.style.fontWeight='bold'});/*设置onmouseout事件*/onmouseout:expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor ='';this.style.fontWeight=''});}/*使火狐浏览器实现相应效果*/li:hover{background:color:border-color:font-weight:}&/style&&/HEAD&&BODY&&ul&&li&我是第一行列表&/li&&li&我是第二行列表&/li&&li&我是第三行列表&/li&&li&我是第四行列表&/li&&li&我是第五行列表&/li&&/ul&&/BODY&&/HTML&
&font color="red"&注:火狐是不支持expression的,而且expression也比较占资源,建议改为js实现!&/font&
&div style="position:height:12left:0; top:expression(document.body.clientHeight- this.style.pixelHeight+document.body.scrollTop);font:12"&IE里我永远在左下角。^o^&/div&
阅读(...) 评论()

我要回帖

更多关于 js css 的文章

 

随机推荐