DOM基本操作之习题二

    xiaoxiao2021-04-16  240

    1、封装兼容性方法,求滚动条滚动离getScrollOffset()

    <script type="text/javascript"> function getScrollOffset(){ if(window.pageXOffset){ return{ x : window.pageXOffset, y : window.pageYOffset } }else{ return{ x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop } } } </script>

    2、封装兼容性方法,返回浏览器视口尺寸grtViewportOffset()

    <script type="text/javascript"> function getViewportOffset(){ if(window.innerWidth){ return{ w : window.innerWidth, h : window.innerHeight } }else{ if(document.compatModde == "BackCompat"){ return{ w : document.body.clientWidth, h : document.body.clientHeight } }else{ return{ w : document.documentElement.clientWidth, h : document.documentElement.clientHeight } } } } </script>

    3、利用scrollBy()快速阅读的功能(自动阅读)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="./src/demo.css"> </head> <body> <!-- 此处自行加入多行文本 --> N个汉字 <div style="width: 100px;height: 100px;background-color: orange;color#fff;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: #0f0;color:#fff;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 type="text/javascript"> var start = document.getElementsByTagName('div')[0]; var stop = document.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加一个锁来清除多次点击造成的速度加快无法停止的问题 start.onclick = function(){ if(key){ timer = setInterval(function(){ window.scrollBy(0,10); },100); key = false; //点击一次加锁 } } stop.onclick = function(){ clearInterval(timer); key = true; //清除后开锁 } </script> </body> </html>

    4、封装兼容性方法getStyle(elem,prop)

    <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; function getStyle(elem,prop){ if (window.getComputedStyle) { return window.getComputedStyle(elem,null)[prop]; }else{ return elem.currentStyle[prop]; } } </script>

     


    最新回复(0)