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是最好的语言original: 2018-08-03 09:57:135114parcourir

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>

Afficher la taille de l'élément (visuellement)

dom.offsetWidth,dom.offsetHeight

Afficher la position de l'élément

dom.offsetLeft,dom.offsetTop
Pour les éléments sans parent positionné, renvoie les coordonnées relatives au document. Pour les éléments parents positionnés, renvoie les coordonnées relatives au parent positionné le plus proche.
dom.offsetParent
Renvoie le parent positionné le plus proche, sinon, renvoie le corps, body.offsetParent renvoie null
Par exemple : Rechercher les coordonnées de l'élément par rapport au document getElementPosition

Articles Liés

Voir plus