Get window properties (viewport height, element size, element position) in JavaScript-JS Tutorial-php.cn

Get window properties (viewport height, element size, element position) in JavaScript

php是最好的语言

Release： 2018-08-03 09:57:13

Original

5193 people have browsed it

Get window properties

View the scrolling distance of the scroll bar

Compatibility It’s quite confusing, taking two values and adding them at the same time, because it is impossible to have two values at the same time
IE8 and below are not compatible
window.pageXOffset/pageYOffset
##document.body/documentElement.scrollLeft/scrollTop
Encapsulation compatibility method, please The scroll wheel scrolls away from getScrollOffset()

In order to solve the compatibility problem, we encapsulate a function:

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

Copy after login

View the dimensions of the viewport

Applies to browsers in weird mode (backward compatibility)
In standard mode, any browser is compatible
Not compatible with IE and IE8 or below
window.innerWidth/innerHeight
document.documentElement.clientWidth/clientHeight
document.body.clientWidth/clientHeight
Encapsulate the compatibility method and return the browser viewport size getViewportOffset()

In order to solve the compatibility problem, let’s encapsulate a function:

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

Copy after login

View the geometric dimensions of the element

domEle.getBoundingClientRect();
Compatibility Very good
This method returns an object, which has left, top, right, bottom and other attributes. left and top represent the X and Y coordinates of the upper left corner of the element, and right and bottom represent the X and Y coordinates of the lower right corner of the element.
height and width attributes are not displayed in older versions of IE (artificial solution: subtract them separately to get the result)
The returned results are not the same Not "real time"

Let the scroll bar scroll

There are three methods on the window
scroll(x,y) scroll position on the x-axis, y-axis, scrollTo(x,y)
Let the scroll bar scroll to the current position instead of accumulating distance (these two methods are Exactly the same)
scrollBy(); Accumulated scrolling distance
The three methods have similar functions, and the usage is to pass the x, y coordinates enter. That is, let the scroll bar scroll to the current position.
Difference: scrollBy() will accumulate based on the previous data.
eg: Use the scroll() page positioning function.
eg: Use scrollBy() to read quickly.

Exercise:

Make a small reader that will automatically turn pages.

<!DOCTYPE html><html><head>
    <title>Document</title></head><body>文本内容    <p style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</p>
    <p style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</p></body><script type="text/javascript">
    var start = document.getElement.getElementsByTagName(&#39;p&#39;)[0];    var stop = document.getElement.getElementsByTagName(&#39;p&#39;)[1];    var timer = 0;    var key = true;   //加锁，防止连续点start产生累加加速
    start.onclick = function() {
        if(key) {
            timer = setInterval(function() {
                window.scollBy(0,10);
            },100);
            key = false;
        }
    }
    stop.onclick = function() {
        clearInterval(timer);
        key = true;
    }</script>

Copy after login

View the size of the element (visually)