Js定义CSS还有这样的写法?
2008-3-30 14:30高科技,无人驾驶!写程序的人估计都知道一句话:"没有最牛,只有更牛!",有时候你花了一大篇写的东西,人家几行代码就搞定了,而且效率还是你的几倍,佩服吧!今天在BlueIdea上看到这段代码,才知道原来还有这种高级的写法!
XML/HTML代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- *{margin:0px; padding:0px;}
- </style>
- <script type="text/javascript"></script>
- <title>test</title>
- </head>
- <body>
- <p>ddddddddddddddddd</p>
- <div>sdfsdfsd<br/></div>
- <div class="drag" >
- <h1>测试一</h1>
- </div>
- <div class="drag" >
- <h1>测试一</h1>
- </div>
- <div class="drag" >
- <h1>测试一</h1>
- </div>
- <div class="drag"><h1>测试二</h1></div>
- <div class="drag"><h1>测试三</h1></div>
- <div class="drag"><h1>测试四</h1></div>
- <div class="drag"><h1>测试五</h1></div>
- </body>
- </html>
- <script type="text/javascript">
- var s=document.body.getElementsByTagName("*");
- //alert(s[2].innerHTML)
- var tempDiv=document.createElement("div");
- with(tempDiv.style){
- display="none";
- position="absolute";
- lineHeight="20px";
- padding="5px";
- border="1px solid red"
- }
- document.body.appendChild(tempDiv);
- for(var i=0;i<s.length;i++){
- s[i].onmouseover=function(){
- tempDiv.style.left=this.offsetX||this.offsetLeft+20;
- tempDiv.style.top=this.offsetY||this.offsetTop+30;
- tempDiv.style.display="block";
- tempDiv.innerHTML=this.innerHTML;
- }
- s[i].onmouseout=function(){
- tempDiv.style.display="none";
- tempDiv.innerHTML="";
- }
- }
- </script>
看看上面定义CSS那段的with写法,太省事了,爽!
通过RSS 2.0来获取此文章的最新评论.