css expressionr,CSS自定义属性expression_r

CSS的出现使网页制作者在对网页元素的控制方便许多，当然，有利必有弊，CSS只能对颜色、大小、距离等静态样式有效，对于要实现某些html元素的动态样式就显得有些力不从心。有了CSS的自定义属性expression_r，可以自己定义属性，自己在属性里写需要的代码，这样就可以结合CSS的特性与JS特效，实现对整体页面上相同元素的控制。是不是觉得有点不可思议？我们先拿新手们经常问的怎么消除页面上的链接虚线框为例。

通常的做法是：

link1

link2

link3

粗看或许还体现不出采用expression_r的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？采用expression_r的做法如下：

a {star : expression_r(οnfοcus=this.blur)}

link1

link2

link3

说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression_r()里的语句就是JS脚本，在自定义属性与expression_r之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为

input {star : expression_r(οnmοuseοver=this.style.backgroundColor="#FF0000";

οnmοuseοut=this.style.backgroundColor="#FFFFFF")}

可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示： <style type="text/css">

input {star : expression_r(οnmοuseοver=function()

{this.style.backgroundColor="#FF0000"},

οnmοuseοut=function(){this.style.backgroundColor="#FFFFFF"}) }

</style>

<input type="text">

<input type="text">

<input type="text">

看了这么多，感觉怎么样，是不是有点概念了呢。使用CSS的自定义属性很简洁地用较少的代码实现了用JS产生的相同的效果，真正起到了事半功倍的作用，你还不赶快去试试？

【CSS】333- 使用CSS自定义属性做一个前端加载骨架

点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...

CSS Variables：css自定义属性的使用

CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命.之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 一.兼容性 ...

css自定义属性和简单效果

简介 CSS Variables,一个并不是那么新的东西,但对css来说绝对是一场革命. 之前使用变量的时候,需要借助sass.less等预处理工具来实现,现在我们可以直接使用css来声明变量. 兼容 ...

CSS变量(自定义属性)实践指南

本文翻译自:https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 转载请注明出处:葡萄城官网,葡萄城为开 ...

css样式中position和&lowbar;position的区别

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3IAAAEUCAIAAADhh5PYAAAgAElEQVR4nO3dPa/rNoLGcX6dW6UL+B ...

引人瞩目的 CSS 变量(CSS Variable)

这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

&lbrack;转&rsqb;用CSS给SVG &lt&semi;use&gt&semi;的内容添加样式

来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

你不知道的css中的expression

expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,[这里的CSS属性可以是元素固有的属性,也可以是自定义属性.]是动态设置CSS属性的强大方法,但也 ...

深入了解CSS字体度量，行高和vertical-align

line-height和vertical-align在CSS中是两个简单的属性.如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们.但事实上并不如此.他们其实很复杂,也是CSS中 ...

随机推荐

Python框架之Tornado(四)源码之褪去模板外衣的前戏

执行字符串表示的函数,并为该函数提供全局变量 本篇的内容从题目中就可以看出来,就是为之后剖析tornado模板做准备,也是由于该知识点使用的巧妙,所有就单独用一篇来介绍了.废话不多说,直接上代码: # ...

JQuery中对option的添加、删除、取值

jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...});    //为Selec ...

bootstrap的基本模板