css控制input标签_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:52:43
原创
1259人浏览过

逛到发现这个 个人感觉非常赞 

下面是css样式 

Js代码                          

  1. input {  
  2. border:1px solid #B3D6EF;   
  3. background:#ffffff;   
  4. }  
  5. input {  
  6.     star : expression(  
  7.     onmouseover=function(){this.style.backgroundColor="#D5E9F6"},  
  8.     onmouseout=function(){this.style.backgroundColor="#ffffff"})  
  9.     }  



好处在于 不用在页面中写一堆一堆的onMouseover函数了 

lolo 
有些问题需要注意下,这种写法有可能在IE6下造成浏览器卡死,目前做的一个旧出现了卡死现象... 

2009年11月24日1:31:36 
这里引用下怪飞的一篇CSS优化的文章 

引用


浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。 
如何对 CSS Expression 进行优化呢? 
至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。 
old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案: 

立即学习前端免费学习笔记(深入)”;

引用

在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。

 

喜鹊标书
喜鹊标书

AI智能标书制作平台,10分钟智能生成20万字投标方案,大幅提升中标率!

喜鹊标书 111
查看详情 喜鹊标书

Js代码  

  1. div {  
  2.     zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));  
  3. }  


或者 

Js代码  

  1. div {  
  2.     -singlex: expression(this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this));  
  3. }  


说明一下~: 
CSS Expression 执行在任意一个匹配的元素上。 
在 CSS expression 内, “this”关键字指向当前匹配的 HTML 元素。 
CSS 属性选用一些不常用的属性来触发,触发完重置回默认值。 

这里是原文 
http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/  

引用


关于Expression,雅虎团队提到这些 

18、避免使用CSS表达式(Expression  
      CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色: 
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );  
如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。 
      表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。 
      一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。  

 

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号