zoukankan      html  css  js  c++  java
  • DOM基本操作

    1.查看滚动条的滚动距离

    document.body.scrollLeft与document.documentElement.scrollLeft是冲突的,一个有值另一个的值就为0,

    ▲兼容性比较混乱,同时取两个值相加,因为不可能存在两个同时有值

    so最兼容的写法就是document.body.scrollLeft+document.documentElement.scrollLeft

    window.pageXOffset/pageYOffset    IE8/IE8以下都不兼容,IE9以上才兼容

    举个例子:封装兼容性方法,求滚轮滚动离aa()

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        D
    </head>
    <body>
    <div style=" 10000px; height: 23000px; background-color: #ddd;"></div>
    <script type="text/javascript">
        function aa() {
            //0 && window.pageXoffset代表失效,else是验证IE9以下
            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>
    
    
    </body>
    </html>

    效果图:

    2.视口尺寸

    window.innerWidth/innerHeight     IE8/IE8以下都不兼容

    document.documentElement.clientWidth/clientHeight    标准模式下,任何浏览器都兼容

    document.body.clientWidth/clientHeight   适用于怪异模式下的浏览器(当html页面没有声明(<!DOCTYPE html>)是就是怪异模式)

    举个例子:

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

  • 相关阅读:
    字符串语法
    组合数
    并查集
    Java Collection HashMap源码分析
    Java 虚拟机 ClassLoader
    Java 多线程 Future
    Java 虚拟机 GC机制
    Java 基础 原生类型
    Java 多线程 死锁deadlock产生原因+避免方法
    Java 基础 基本类型vs引用类型,传值vs传引用
  • 原文地址:https://www.cnblogs.com/huanghuali/p/8526335.html
Copyright © 2011-2022 走看看