JavaScript ежедневные советы

Viewport

На стороне ПК, окно просмотра относится к визуальной области браузера, ширины окна браузера и последовательным. Кроме того , можно назвать видимой области.
Существует полоса прокрутки браузера, то , как мы находим элемент находится в видимой области этого, мы нуждаемся в помощи Element.getBoundingClientRect ()
Смысл в том , что они возвращаются к размеру и положению относительно окна просмотра, а

Возвращает объект

Во-первых, мы получаем видимую область

/**
获取视口
**/
function getViewportOffset() {
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        if (document.compatMode == "BackCompat") {
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}
/**
判断是否在元素是否在是视口内
**/
function isElementInViewport(ele) {
    var vp = getViewportOffset() 
    var rect = ele.getBoundingClientRect();
    console.log("top:"+rect.top+",left:"+rect.left+",bottom:"+rect.bottom+",right:"+rect.right);
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= vp.h &&
        rect.right <= vp.w
    );
}

Пользовательские атрибуты

Html5 добавили новую функцию, которая data- пользовательские атрибуты. Похоже , не. , , Это есть то , что вы не можете пользовательские атрибуты, а затем прочитать через GetAttribute это, да, нет проблем, html5 просто сделали свое единство, и читать данных- пользовательское свойство также предоставляет новый интерфейс

<div style="width: 100px;height:100px;background-color:red;" data-src="cs"></div>
<script>
   var div = document.getElementsByTagName("div")[0];
   var data = div.dataset.src;  //cs
</script>