欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

获取窗口属性,获取DOM元素尺寸

程序员文章站 2022-06-15 13:52:59
...

   查看滚动条的滚动距离

        window.pageXOffset  //x轴

        window.pageYOffset   // y轴

    查看可视窗口的尺寸

        window.innerWidth/innerHeight

 

        标准模式,怪异模式

        就是文档第一行<!DOCtype html>,去掉的话就是怪异模式了

        怎么分辨文档是什么模式?

        document.compatMode结果是CSS1Compat是标准,如果是BackCompat是怪异

        查看元素的尺寸

        dom.offestWidth

        dom.offsetHeight

        查看元素的位置

        dom.offsetLeft

        dom.offsettop

        对于无定位父级的元素,返回相对文档的坐标。对于有父级定位的元素,返回相对于

        最近于最近有定位的父级的坐标。

        

        dom.offsetParent

        返回最近的有定位的父级,如无,返回Body,  body.offsetParent返回null

        让滚动条滚动

        window上有三个方法

        scroll(),scrollTo()这两个功能一样,用哪个都可以

        scrollBy();会在之前的数据基础上进行累加

        可以做一个简易小说阅读器

<!DOCTYPE html>
<html lang = "en">
    <head>
<meta charset = "UTF-8">
    </head>
    <body>
     
    放入若干文档
        

        
     

<div style= "width: 100px;height: 100px;background-color: orange;
color: palevioletred;font-size: 40px;font-weight: bold;text-align: center
;line-height: 100px;position: fixed;bottom: 200px;right: 50px;border-radius: 50%;opacity: 0.5;">
start</div>
<div style= "width: 100px;height: 100px;background-color:green;
color: palevioletred;font-size: 40px;font-weight: bold;text-align: center
;line-height: 100px;position: fixed;bottom: 50px;right: 50px;border-radius: 50%;opacity: 0.5;">
stop</div>
       <script>    
   var start = document.getElementsByTagName('div')[0];
   var stop = document.getElementsByTagName('div')[1];
   var timer;
     start.onclick = function (){
    timer = setInterval(function(){
        window.scrollBy(0,10);
    },100)
}
stop.onclick = function(){
    clearInterval(timer);
}

 
        </script>
    </body>
</html>

相关标签: dom