|
body是document所在的body標籤內的整體相關資訊的物件，如果能善用body物件，網頁可以寫得很精彩。 <BR /> body的屬性與方法 <BR /> scrollTop 捲軸頂端位置(如同VB的ScrollBar的Top屬性) <BR /> scrollLeft 捲軸左端位置(如同VB的ScrollBar的Left屬性) <BR /> scrollWidth 捲軸的寬度(如同VB的ScrollBar的Width屬性) <BR /> scrollHeight 捲軸的高度(如同VB的ScrollBar的Height屬性) <BR /> clientHeight 工作區域的高度(如同VB的Form的ScaleHeight屬性) <BR /> clientWidth 工作區域的寬度(如同VB的Form的ScaleWidth屬性) <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> <BR /> 定义 <BR /> IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 <BR /> <BR /> 给元素固有属性赋值 <BR /> <BR /> 例如，你可以依照浏览器的大小来安置一个元素的位置。 <BR /> <BR /> #myDiv { <BR /> position: absolute; <BR /> width: 100px; <BR /> height: 100px; <BR /> left: expression(document.body.offsetWidth - 110 + "px"); <BR /> top: expression(document.body.offsetHeight - 110 + "px"); <BR /> background: red; <BR /> } <BR /> <BR /> 给元素自定义属性赋值 <BR /> <BR /> 例如，消除页面上的链接虚线框。 通常的做法是： <BR /> <BR /> <a href="link1.htm" onfocus="this.blur()">link1</a> <BR /> <a href="link2.htm" onfocus="this.blur()">link2</a> <BR /> <a href="link3.htm" onfocus="this.blur()">link3</a> <BR /> <BR /> 粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？ <BR /> <BR /> 采用expression的做法如下： <BR /> <BR /> <style type="text/css"> <BR /> a {star : expression(onfocus=this.blur)} <BR /> </style> <BR /> <a href="link1.htm">link1</a> <BR /> <a href="link2.htm">link2</a> <BR /> <a href="link3.htm">link3</a> <BR /> <BR /> 说明：里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非s cript内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为 <BR /> <BR /> <style type="text/css"> <BR /> input <BR /> {star : expression(onmouseover=this.style.backgroundColor="#FF0000"; <BR /> onmouseout=this.style.backgroundColor="#FFFFFF")} <BR /> </style> <BR /> <style type="text/css"> <BR /> input {star : expression(onmouseover=this.style.backgroundColor="#FF0000"; <BR /> onmouseout=this.style.backgroundColor="#FFFFFF")} <BR /> </style> <BR /> <input type="text"> <BR /> <input type="text"> <BR /> <input type="text"> <BR /> <BR /> 可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示： <BR /> <BR /> <style type="text/css"> <BR /> input {star : expression(onmouseover=function() <BR /> {this.style.backgroundColor="#FF0000"}, <BR /> onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) } <BR /> </style> <BR /> <input type="text"> <BR /> <input type="text"> <BR /> <input type="text"> <BR /> <BR /> 注意 <BR /> <BR /> 不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。 <BR /> <BR /> <BR /> <BR /> 以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。 固定像素适应: 运行代码框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0px; padding: 0px; } #pic{ margin:0 auto; width:800px; padding:0; border:1px solid #333; } #pic img{ max-width:780px; width:expression(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 百分比适应: 运行代码框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0; padding: 0; } #pic{ margin:0 auto; width:90%; padding:0; border:1px solid #333; } #pic img{ max-width:80%; width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*8/10? "80%": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 提醒: 1 该方法不只是用于img; 2 max-width,max-height,min-width,min-height. |
|
|
