zoukankan      html  css  js  c++  java
  • js中top,left,height,width相关参数的解析和实例

    下面的这些参数的解析都是针对于IE浏览器的:

    得到屏幕中鼠标的坐标,相对于整个页面:
    x=event.clientX, y=event.clientY


    得到当前窗口的宽度:
    w=document.body.clientWidth;
    h=document.body.clientHeight; 
    在html中,如果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句没有删掉的话,得到的高度是不

    正确的。


    屏幕可用工作区高度,宽度:
    h=window.screen.availHeight;
    w=window.screen.availWidth;


    屏幕总高度,宽度:
    h= window.screen.height;
    w= window.screen.width;

    Left:

    实例:

    Html代码 复制代码
    1. <div style="200px;height:200px;background-   
    2. color:#999999;overflow:hidden;border:#666666 solid 2px" id="p">  
    3.   <div style="200px;height:150px;background-color:#FFFF00;" id="t">如果为p设置了    
    4. scrollTopeeeeeeeeewrfdsfsddf这些,这些内容可能不会完全显示。</div>  
    5. </div>  
    6. <script type="text/javascript">  
    7. var p = document.getElementById("p");   
    8. var tdocument.getElementById("t");   
    9. p.scrollLeft =50;   
    10. </script>  

     divLeft=p.style.Left   表示p在样式中定义的left的值,该例没有定义所以为空

     divClientLeft=p.clientLeft  表示p的border的宽度 p.clientLeft=2
     divScrollLeft=p.scrollLeft 表示p的最顶端和可见内容的最顶端的距离,则t中的汉字会左边隐藏50px(不对??)

    offsetLeft 实例:

    Html代码 复制代码
    1. <script language="javascript">  
    2. function tt(){   
    3.     var testObj=document.getElementById("test");   
    4.     var toptest=document.getElementById("toptest");   
    5.     var test1=document.getElementById("test1");   
    6. }   
    7. </script>  
    8. <body onload="tt()">  
    9. <div id="toptest" style="background-color:red; border:4px solid #FFFF99; position:    
    10. relative; 100px; height:100px; overflow:auto; left:10px">      
    11. <div id="test" style="position:absolute ; border:#999999 2px solid; height:120;    
    12. 140px; left:10px"></div>  
    13. </div>    
    14. <div id="test1" style="position:relative ; border:#000000 2px solid; height:200px;    
    15. overflow:scroll; " />  

     divOffsetLeft=objDiv.offsetLeft 表示该div相对于父对象的左边的距离 toptest.offsetLeft=20
    testObj.offsetLeft=10   test1.offsetLeft=10

    top:

    divTop=objDiv.style.top 表示div在样式中定义的top的值,否则为空
    divClientTop=objDiv.clientTop  表示div的border的宽度

    divOffsetTop=objDiv.offsetTop 表示该div相对于父对象的高度。

    scrollTop实例:

    Html代码 复制代码
    1. <div style="200px;height:200px;background-color:#999999;overflow:hidden;" id="p">  
    2.   <div style="100px;height:300px;background-color:#FFFF00;" id="t">如果为 p 设置了    
    3.   
    4. scrollTop,这些内容可能不会完全显示。</div>  
    5. </div>  
    6. <script type="text/javascript">  
    7. var p = document.getElementById("p");   
    8. p.scrollTop = 20;   
    9. </script>  

     divScrollTOp=objDiv.scrollTop 表示div的最顶端和可见内容的最顶端的距离,上实例表明如果设置了外层元素p的scrollTop,那么内层元素的内容会向上“卷起”。

    实例代码:

    Html代码 复制代码
    1. <div style="200px;height:200px;background-color:#999999;overflow:hidden;    
    2. border:#999999 solid 2px" id="p" >  
    3.   <div style="250px;height:150px;background-color:#FFFF00;" id="t">如果为p设置   
    4. dfdddddddd这些内容可能不会完全显示。</div>  
    5. </div>  
    6. <script type="text/javascript">  
    7. var p = document.getElementById("p");   
    8. var tdocument.getElementById("t");   
    9. </script>  

     divWidth=p.style.width 表示div在样式中定义的height的值 200px
    divScrollWidth=p.scrollWidth  表示网页内容实际高度。为内层元素的实际高度+外层元素的padding   300
    divClientWidth=p.clientWidth 如果为单层 div 则是width-border-滚动条,即div可视区域的高度,

    但如果有包含关系,则内层元素高于外层元素,则为原来的高度 200.而t.clientWidth=250。里面没有包含所以就是他本身
    divOffsetWidth=p.offsetWidth 结果等于clientHeight+border+滚动条 p.offsetWidth=  204而
    t.clientWidth=254

    height实例:

    Html代码 复制代码
    1. <div style="200px;height:200px;background-color:#999999;overflow:hidden;    
    2. border:#999999 solid 2px" id="p" >  
    3.   <div style="100px;height:300px;background-color:#FFFF00;" id="t">如果为p设置   
    4. dfdddddddd这些内容可能不会完全显示。</div>  
    5. </div>  
    6. <script type="text/javascript">  
    7. var p = document.getElementById("p");   
    8. </script>  

     divHeight=p.style.height 表示div在样式中定义的height的值 200px
    divScrollHeight=p.scrollHeight 表示网页内容实际高度。为内层元素的实际高度+外层元素的padding 300
    divClientHeight=p.clientHeight 如果为单层 div 则是height-border-滚动条,即div可视区域的高度

    , 但如果有包含关系,则内层元素高于外层元素,则为原来的高度 200
    divOffsetHeight=p.offsetHeight 结果等于clientHeight+border+滚动条   204

  • 相关阅读:
    Mybatis 传入的参数为List
    IDEA 自动清除不使用的 引用包
    java List去除重复数据
    oracle 导出数据库报错 EXP-00002: 写入导出文件时出错 EXP-00000: 导出终止失败
    Tomcat修改窗口名
    Oracle忘记密码找回
    3springboot执行原理及自动装配原理
    2springboot第一个程序
    springboot项目有红叉,但是没有运行没有报错。
    1springboot与微服务
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1592749.html
Copyright © 2011-2022 走看看