码迷,mamicode.com
首页 > Web开发 > 详细

网页中的宽与高

时间:2017-12-26 23:47:38      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:win   func   兄弟节点   targe   点击事件   width   演示   play   function   

先设置网页的大屏幕的宽高,以及点击事件:

 1 <div style="width : 2000px,height : 2000px" onmousedown = "ww()"> 

<div id = "ex" style = "width :100px,height:30px "></div>

</div> 

再设置它的样式:

 1 *{ margin :0px; padding:0px; } 

然后是js代码部分:

 1 function $(oId){
 2             return document.getElementById(oId);
 3         }
 4         
 5         function ww(){
 6             var w= document.documentElement.clienWidth;
 7             var h = document.documentElement.clienHeight;
 8             var ww = window.pageXOffset; //pageXOffset 属性返回文档在窗口左上角水平滚动的像素
 9             var hh = window.pageYOffset;
10             // pageYOffset属性返回文档在窗口垂直方向滚动的像素
11             var sw = w/2+ww;
12             var sh = h/2+hh;
13             rs(sw,sh); //调用
14         }
15         
16     function rs(sw,sh){
17         $("ex").nextSibling.parentNode.removeChild( //先找到父节点再移除它
18         $("ex").nextSibling);//兄弟节点
19         var obj = document.createElement("div");
20         obj.style.width = "100px";
21         obj.style.height = "100px";
22         obj.style.position = "absolute";
23         obj.style.display = "block";
24         obj.style.top = sh+"px";
25         obj.style.left = sw+"px";
26         obj.style.backgroundColor = "red";
27         $("hehe").appendChild(obj);
28     }
29     

 [演示效果](http://localhost:63342/demo/work6.html)

网页中的宽与高

标签:win   func   兄弟节点   targe   点击事件   width   演示   play   function   

原文地址:https://www.cnblogs.com/dzlx/p/8120501.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!