zoukankan      html  css  js  c++  java
  • clientX, clientY,offsetX, offsetY,screenX, screenY, x, y

    clientX, clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0;

    offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;

    screenX, screenY是相对于用户显示器的位置

    x,y是鼠标相对于当前浏览器的位置

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <HTML>
    
    <HEAD><TITLE>Measure for Measure</TITLE>
    
    <SCRIPT>
    
    <!--
    
    function one() {
    
    report.value = "The DIV above is relatively positioned in the BODY.    The style object contains the information that was set in the inline style to position this object.    The following are the values that would be reported for the various position and dimension properties on the style object for the DIV:" + "
    
    ";
    
    report.value= report.value + " mydiv.style.top (string) = " + foodiv.style.top + "
    ";
    
    report.value= report.value + " mydiv.style.left (string) = " + foodiv.style.left + "
    ";
    
    report.value= report.value + " mydiv.style.height (string) = " + foodiv.style.height + "
    ";
    
    report.value= report.value + " mydiv.style.width (string) = " + foodiv.style.width + "
    ";
    
    report.value= report.value + " mydiv.style.pixelTop (long) = " + foodiv.style.pixelTop + "
    ";
    
    report.value= report.value + " mydiv.style.pixelLeft (long) = " + foodiv.style.pixelLeft + "
    ";
    
    report.value= report.value + " mydiv.style.pixelHeight (long) = " + foodiv.style.pixelHeight + "
    ";
    
    report.value= report.value + " mydiv.style.pixelWidth (long) = " + foodiv.style.pixelWidth + "
    ";
    
    report.value= report.value + " mydiv.style.posTop (long) = " + foodiv.style.posTop + "
    ";
    
    report.value= report.value + " mydiv.style.posLeft (long) = " + foodiv.style.posLeft + "
    ";
    
    report.value= report.value + " mydiv.style.posHeight (long) = " + foodiv.style.posHeight + "
    ";
    
    report.value= report.value + " mydiv.style.posWidth (long) = " + foodiv.style.posWidth + "
    ";
    
    }
    
    function two() {
    
    report.value = "Each object has a set of offset positions.    The offset properties for the positioned darkBlue DIV above are: 
    ";
    
    report.value= report.value + "     offsetLeft = " + foodiv.offsetLeft + "
    ";
    
    report.value= report.value + "     offsetTop = " + foodiv.offsetTop + "
    ";
    
    report.value= report.value + "     offsetHeight = " + foodiv.offsetHeight + "
    ";
    
    report.value= report.value + "     offsetWidth = " + foodiv.offsetWidth + "
    ";
    
    report.value= report.value + "     offsetLeft = " + document.body.offsetLeft + "
    ";
    
    report.value= report.value + "     offsetTop = " + document.body.offsetTop + "
    ";
    
    report.value= report.value + "     offsetHeight = " + document.body.offsetHeight + "
    ";
    
    report.value= report.value + "     offsetWidth = " + document.body.offsetWidth + "
    ";
    
    }
    
    function three() {
    
    report.value = "Scroll values for the darkBlue DIV object" + "
    ";
    
    report.value= report
  • 相关阅读:
    织梦内容模型自定义字段设置一个随机数
    网页禁止右键查看源码屏蔽键盘事件
    面试官:如何防止 Java 源码被反编译?我竟然答不上来。。
    Elastic Job 同城主备、同城双活,高可用必备~
    再见,Spring Security OAuth!!
    怎么让 Linux 进程在后台运行?
    30 个 ElasticSearch 调优知识点,都给你整理好了!
    Spring Boot 2.5.4 发布,2.2.x 正式结束使命!
    移动端与服务器端之间的 token 怎么设计?
    最新数据库排行出炉,SQL Server 暴跌。。
  • 原文地址:https://www.cnblogs.com/mingforyou/p/4105600.html
Copyright © 2011-2022 走看看