实现最小宽度的几种方法及CSS Expression

实现最小宽度的几种方法：css表达式尽量不用

支持FF IE7 IE6

.test

{

background:blue;

min-width:300px;

width:auto !important;

width:300px;

float:left;

width:expression(document.body.clientWidth <= 300? "300px": "auto" );

}

支持FF IE7

.test

{

background:blue;

min-width:300px;

width:auto !important;

width:300px;

float:left;

}

支持FF IE7 IE6

.test

{

width:expression(document.body.clientWidth <= 300? "300px": "auto" );

min-width:300px;

}

CSS Expression也称为CSS表达式，它是动态设置CSS属性的强大方法，但也存在着一定的危险性。

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

CSS Expression在其它浏览器中不起作用，因此在跨浏览器的编码中单独针对IE设置时会比较有用。

从IE5开始支持CSS Expression。我们看下面的代码：

background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代码是使用CSS Expression，实现隔一个小时切换一次背景颜色。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

一个减少CSS Expression计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS Expression。

如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS Expression，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。不要让您的用户感觉打开你的页面，机器会变的很慢。

转载于:https://www.cnblogs.com/dsliang/archive/2009/03/19/1416264.html

实现最小宽度的几种方法及CSS Expression相关推荐

css切割图片是什么,两种方法实现css切割图片，只取图片中一部分
参考地址:http://www.jb51.net/css/150036.html 场景:如果一个页面有个img小图标,那么访问浏览器的时候会因为加载图片导致浏览速度放慢.这个时候将这么多的小图标放在一 ...
html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素方法2: #test{display:block;zoom:1;overflow ...
6种方法实现css布局水平居中
说到常见css布局,面试时经常也会考考大家,看对css知识掌握的咋样,对css盒模型理解没,比如会问css布局水平居中的方法或者css布局垂直居中的方法等,今天分享常见css布局水平居中的6种方法. ...
三种方法实现CSS三栏布局
本文由云+社区发表作者:前端林子本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
html之四种方法导入css...
原文地址:http://hi.baidu.com/lizhanfu/blog/item/4dbc806499bed82fab184c9c.html 在html中,引入css的方法主要有行内式.内嵌式. ...
flex 底部固定_详解八种方法实现CSS页面底部固定
当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底部, 方法一:footer高度固定+绝 ...
mysql事务怎么加排他锁_八种方法实现CSS页面底部固定 - SegmentFault 思否
共享锁.排他锁 InnoDB 实现了两种类型的锁机制:共享锁(S)和排他锁(X).共享锁允许一个事务读数据,不允许修改数据,如果其他事务要再对该行加锁,只能加共享锁:排他锁是修改数据时加的锁,可以读取 ...
html+ul隐藏滚动条,2种方法实现CSS隐藏滚动条并可以滚动内容的方法
方法1:计算滚动条宽度并隐藏起来 html代码: Loremipsumdolorsitamet,consecteturadipiscingelit.Integervehiculaquamnibh,eu ...
纯css实现手风琴效果_创建纯CSS手风琴的4种方法
内容手风琴是一种有用的设计模式. 您可以将它们用于许多不同的事物:用于菜单,列表,图像,文章摘录,文本片段甚至视频那里的大多数手风琴都依赖JavaScript,主要是jQuery ,但是由于高级CS ...
CSS实现水平垂直的几种方法
title: CSS实现水平垂直的几种方法 categories: CSS tags: - CSS - HTML - 面试题 date: 2021-09-11 在HTMl中分为块级元素和内联元素, ...

实现最小宽度的几种方法及CSS Expression

实现最小宽度的几种方法及CSS Expression相关推荐

最新文章

热门文章