CSS中expression怎么用？ CSS expression详解
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 是不是感觉上面的文字有点晦涩？没有关系，你只需要知道：我们可以通过expression把Javascript脚本写放在css文件中，通过它来实现一些很方便的功能与效果。
下面的实例是依照浏览器的大小来安置一个元素的位置。查看运行效果试试。
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[url]www.52css.com</title>[/url]
<style type="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>
<div id="myDiv">52css.com</div>
</body>
</html>
我们想给页面的链接消除点击时产生的虚线。
在一般情况下，我们是这样做的：
<a href="link2.htm" οnfοcus="this.blur()">52css.com</a><br />
<a href="link3.htm" οnfοcus="this.blur()">52css.com</a>
a {star:expression(this.onFocus=this.blur())}
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[url]www.52css.com</title>[/url]
<style type="text/css">
<!--
a {star:expression(this.onFocus=this.blur())}
-->
</style>
</head>
<body>
<a href="#">我爱CSS - [url]www.52css.com</a[/url]>
</p>
</body>
</html>
需要引起你特别重视的：若不是非常特别的需要用到expression，一般不建议使用expression，因为expression对浏览器资源要求比较高。
我们将在以后的文章中，写出一些关于expression应用的实例及用法的注意点，请关注我们的网站：我爱CSS-52css.com。
转载于:https://blog.51cto.com/800myweb/112529
CSS中expression怎么用？ CSS expression详解相关推荐
- css中“[]”、“”“~”、“，”、“+”和“”详解
p~ul{background:#8e8e8e; } <p>段落P</p> <ul><li>列表项1</li><li>列表项2& ...
- CSS中position的4种定位详解
大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...
- CSS中#号、.号、*号详解
#: #号的作用是控制对应div的css样式,具体事例如下: HTML代码: <div id="jinghao"> </div> CSS代码: #jingh ...
- CSS中 特性查询（@supports）详解及使用
1. 简介 CSS中的 @supports 用于检测浏览器是否支持 CSS 的某个属性.其实就是条件判断,如果支持某个属性可以写一套样式,如果不支持某个属性,可以提供另外一套样式作为替补.可以放在代码 ...
- css 中多个class选择器的详解
ml中: <div class="containerA"> 这是AAAAAAAAAAAAAAAAAAAAAAA样式<div class="contain ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
- 友情链接在html中怎么写,HTML+CSS入门 网站友情链接显示页面详解
本篇教程介绍了HTML+CSS入门 网站友情链接显示页面详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.列表标签 有序列表:type默认是1,2,3--,rese ...
- html+css+javascript实现小游戏2048（详解，附源代码）
html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...
- html 仿word页面,HTML+CSS入门 HTML页面仿WORD样式详解
本篇教程介绍了HTML+CSS入门 HTML页面仿WORD样式详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 要求不再浏览器中添加office插件的前提下.展示WOR ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
最新文章
- 资深算法专家解读CTR预估业务中的深度学习模型
- 3d饼图 vue_Vue+Echarts构建可视化大数据平台实战项目分享（附源码）(上)
- vfatfs.sys加载
- PHP获取文件的绝对路径
- JavaScript消息框应用
- 剑指 Offer 53 - I. 在排序数组中查找数字 I（二分法）
- flutter offset_用Flutter实现58App的首页
- python怎么读取excel-python怎么从excel中读取数据？
- 如何开启远程桌面的服务器,如何启用远程服务器 开启服务器的远程桌面控制...
- LabelImage 安装过程
- java对静态图片/Gif图片/视频进行水印
- 所有城市及经纬度数据（2021-8-28）
- 12、PIC系列-I2C通讯模块
- 预防XSS——后端HttpUtility.HtmlEncode，AntiXssEncoder.HtmlEncode方法；前端htmlencode，htmldecode，JavaScriptEncode
- 2018信用服务业市场：天眼查、企查查、启信宝、企查猫处第一梯队
- 商城系统-数据库设计
- python正则表达式匹配开头,正则表达式系列（一）：匹配开头与结尾
- 论文笔记----Selective Transfer Learning for EEG-Based Drowsiness Detection
- Uboot 2017.01 启动流程分析
- python实现简单的神经网络,python调用神经网络模型