逛到发现这个 个人感觉非常赞
下面是CSS样式
input {
border:1px solid #B3D6EF;
background:#ffffff;
}
input {
star : expression(
onmouseover=function(){this.style.backgroundColor="#D5E9F6"},
onmouseout=function(){this.style.backgroundColor="#ffffff"})
}
好处在于 不用在页面中写一堆一堆的onMouseover函数了
lolo
有些问题需要注意下,这种写法有可能在IE6下造成浏览器卡死,目前做的一个旧出现了卡死现象...
2009年11月24日1:31:36
这里引用下怪飞的一篇CSS优化的文章
引用
浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。
如何对 CSS Expression 进行优化呢?
至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。
old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案:
引用
在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。
div {
zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}
或者
div {
-singlex: expression(this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this));
}
说明一下~:
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表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。
分享到:
相关推荐
使用 CSS 控制 input 输入框的长度尺寸非常方便,例如:`<input type="text" style="width:120px;" />`。 5. 自动获得焦点 可以使用 JavaScript 来实现自动获得焦点,例如:`”document.forms.form_name.form_...
2. **伪类选择器**:`:hover`、`:focus`、`:active`等伪类选择器可以分别控制鼠标悬停、获取焦点和按下状态时input框的样式,使得用户交互更具有反馈感。 3. **阴影效果**:CSS3的`box-shadow`属性可以创建输入框的...
- `input`标签在HTML中用于创建交互式控件,如按钮、文本框、复选框等。`type="button"`定义了一个普通按钮。 2. **CSS3按钮样式**: - `border-radius`属性用于设置圆角,可以让按钮看起来更加现代和友好。 - `...
使用CSS3的属性选择器,如`input[type="checkbox"]`和`input[type="radio"]`,可以实现对特定类型元素的精细化控制,同时保持良好的浏览器兼容性。而对于老旧的IE浏览器,可以考虑使用`expression`属性,但要意识到...
7. **jQuery整合**:标签中提到的jQuery是一个流行的JavaScript库,可以与CSS3结合使用,实现更复杂的交互效果。例如,通过监听事件(如`focus`和`blur`)并在JavaScript中更改CSS类,可以轻松控制动画的触发时机。 ...
本节我们将深入探讨如何使用jQuery批量修改`<input>`标签的CSS样式。 首先,`<input>`标签在HTML中常用于创建各种表单输入元素,如文本框、密码框、复选框和单选按钮等。批量修改这些元素的CSS样式可以帮助我们快速...
这些接口使得在程序逻辑中控制标签的状态变得灵活易行。 2. **与Typehead.js的集成**:tagsinput可以与Typehead.js插件无缝配合,当用户在输入时,提供实时的搜索建议和自动补全功能。这大大提高了用户输入的效率,...
文档中提到的主要样式文件命名,如master.css用于主样式,layout.css处理布局,columns.css管理列,font.css控制文字样式,print.css用于打印样式,以及themes.css处理主题。这些命名清晰地指明了每个文件的功能,...
CSS提供了丰富的属性来控制文本、字体、颜色、边框、背景、尺寸、定位、浮动、过渡、动画以及响应式布局等各个方面。 HTML和CSS的结合使用使得网页设计既直观又灵活。通过熟练掌握这些标签和样式规则,开发者可以...
但是,原生的`<input>`标签并不支持直接在其中嵌入图像。为了在`input`文本框内显示小图片,我们需要采用一些变通的方法。 1. **CSS背景图像**: 你可以通过设置`input`元素的CSS背景属性来实现这个效果。例如,...
1、把按钮的背景由灰色变成黄色,下面是代码:〈form method="POST"〉〈input type="button" value="按钮" name="B1" style="background-color: rgb(255,255,0)"〉〈/p〉〈/form〉“form”标签就是表单的标签,...
通过设置不同的CSS样式属性(如`position`、`left`和`bottom`),可以灵活地控制图片按钮的位置。此外,还需要考虑不同浏览器之间的差异性,特别是IE浏览器与现代浏览器之间存在的布局差异。 #### 兼容性问题处理 ...
4. **动画控制**:在事件处理函数中,通过修改`transform`和`opacity`等属性,实现标签的动画浮动和回归。 通过实践和理解这些文件,开发者不仅可以掌握浮动标签特效的实现方法,还能进一步提升对jQuery和CSS3的...
2. **自定义样式**:Antd Input Tag支持自定义样式,通过CSS或者使用内联样式修改标签的外观,包括颜色、大小、边距等。此外,还可以通过props如`className`和`style`来调整组件的整体样式。 3. **禁用和读-only...
本文将详细介绍如何使用jQuery给input标签设置默认值,并通过实例来讲解其具体操作。 ### jQuery基础 在开始使用jQuery之前,我们先了解一些基础知识点。jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过...
首先,我们来看HTML5的`<input>`元素,它是用于创建表单中用户输入区域的标准标签。在HTML5中,`<input>`元素有多种类型,如text、password、email、date等,用于不同的数据输入需求。在这个特效中,我们主要关注`...
- **原理**:默认情况下,`<input type="file">` 的样式是无法通过普通的 CSS 来完全自定义的。这是因为浏览器为了安全性和兼容性考虑,限制了对其样式的修改。但可以通过一些技巧实现部分自定义。 - **技巧**: - ...
默认情况下,这个标签的外观和行为由浏览器控制,但我们可以使用CSS和JavaScript进行一定程度的自定义。 1. **纯HTML解决方案:** 虽然HTML5并没有提供直接改变按钮文字的语言属性,但我们可以通过设置`<input>`...
"float-label-css"是一个专门用于实现这种效果的CSS库,通过纯CSS代码实现标签的浮动效果,使得输入框在获得焦点时,其标签会浮到输入框内,增强表单的视觉吸引力和可用性。 首先,我们来理解一下浮动标签模式的...
然而,由于浏览器之间的兼容性差异,给 `input` 标签添加 CSS 样式时可能会遇到一些挑战。以下是根据描述和提供的内容整理出的在处理 `input` 标签 CSS 时需要注意的关键点: 1. **高度与垂直居中**: - 不建议...