zoukankan      html  css  js  c++  java
  • 网页中的宽与高

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

     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)

  • 相关阅读:
    Leetcode 12. Integer to Roman
    Leetcode 133. Clone Graph
    Leetcode 199. Binary Tree Right Side View
    Leetcode 200. Number of Islands
    React通过Ajax获取数据
    canvas鼠标点击划线
    制作图片墙
    CSS制作翻牌特效
    输入框制作方法
    初来咋到
  • 原文地址:https://www.cnblogs.com/dzlx/p/8120501.html
Copyright © 2011-2022 走看看