Maison  >  Article  >  interface Web  >  Obtenir les propriétés de la fenêtre (hauteur de la fenêtre, taille de l'élément, position de l'élément) en JavaScript

Obtenir les propriétés de la fenêtre (hauteur de la fenêtre, taille de l'élément, position de l'élément) en JavaScript

php是最好的语言
php是最好的语言original
2018-08-03 09:57:135183parcourir

Obtenir les propriétés de la fenêtre

  • Afficher la distance de défilement de la barre de défilement

    • Compatibilité C'est assez déroutant de prendre deux valeurs et de les additionner en même temps, car il est impossible d'avoir deux valeurs en même temps

    • IE8 et inférieurs ne sont pas compatibles

    • window.pageXOffset/pageYOffset

    • document.body/documentElement.scrollLeft/scrollTop

    • méthode de compatibilité d'encapsulation, s'il vous plaît La molette de défilement s'éloigne de getScrollOffset()

Afin de résoudre le problème de compatibilité, nous encapsuler une fonction :

<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>
  • Afficher les dimensions de la fenêtre d'affichage

    • Pour les navigateurs en mode bizarre (compatibilité ascendante)

    • En mode standard, tout navigateur est compatible

    • IE et IE8 et inférieurs ne sont pas compatibles

    • window.innerWidth/innerHeight

    • document.documentElement.clientWidth/clientHeight

    • document.body.clientWidth/clientHeight

    • Encapsuler la méthode de compatibilité et renvoyer la taille de la fenêtre d'affichage du navigateur getViewportOffset()

Afin de résoudre le problème de compatibilité , encapsulons une fonction :

<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>
  • Affichez la taille géométrique de l'élément

    • domEle.getBoundingClientRect();

    • Très bonne compatibilité

    • Cette méthode renvoie un objet qui contient des attributs gauche, haut, droite, bas et autres. gauche et haut représentent les coordonnées X et Y du coin supérieur gauche de l'élément, et droite et bas représentent les coordonnées X et Y du coin inférieur droit de l'élément.

    • Les attributs height et width ne sont pas affichés dans l'ancienne version d'IE (solution artificielle : soustrayez-les séparément pour obtenir)

    • Le retour les résultats ne sont pas les mêmes Pas "en temps réel"

  • Laisser défiler la barre de défilement

    • Il existe trois méthodes sur la fenêtre

    • Scroll(x,y) position de défilement sur l'axe x et l'axe y, scrollTo(x,y)
      Laissez la barre de défilement défiler jusqu'à la position actuelle au lieu d'accumuler la distance (ces deux méthodes sont exactement les mêmes)

    • scrollBy(); distance de défilement cumulée

    • Les trois méthodes ont des fonctions similaires , et l'utilisation est de transmettre les coordonnées x, y. Autrement dit, laissez la barre de défilement défiler jusqu'à la position actuelle.

    • Différence : scrollBy() s'accumulera en fonction des données précédentes.

    • par exemple : utilisez la fonction de positionnement de page scroll().

    • par exemple : utilisez scrollBy() pour lire rapidement.

Exercice :
Créer un petit lecteur capable de tourner les pages automatiquement.

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn