Maison > interface Web > js tutoriel > le corps du texte

L'explication la plus détaillée des propriétés de base du modèle de boîte JS (exemples d'images et de texte)

藏色散人
Libérer: 2022-08-06 17:52:37
avant
2071 Les gens l'ont consulté

Cet article expliquera les propriétés de base du modèle de boîte JS à travers des images et des textes : clientWidth/Height, offsetWidth/Height, offsetTop/Left, scrollWidth/Height, scrollTop/Left, j'espère que ce sera le cas. aidez-vous si vous en avez besoin Aide les amis !

Écrire une boîte JS

 <style>
    .container {
        width: 300px;
        height: 300px;
        border: 3px solid red;
        margin: 50px;
        position: relative;
    }
    .box {
        padding: 30px;
        width: 100px;
        height: 150px;
        border: 10px solid lightblue;
        position: absolute;
        top: 50px;
        left: 50px;
        font-size: 15px;
        line-height: 100px;
        text-align: center;
        overflow: auto;
    }
</style>

<body>
    <div class="container">
        <div class="box">盒子</div>
    </div>
</body>
Copier après la connexion

Modèle :
Lexplication la plus détaillée des propriétés de base du modèle de boîte JS (exemples dimages et de texte)
Attributs de la boîte :

client

  • clientWidth / clientHeight : largeur et hauteur à l'intérieur de la boîte
    (1) clientWidth : largeur du contenu + remplissage gauche et droit
    ( 2) clientHeight : hauteur du contenu + rembourrage supérieur et inférieur
    Lexplication la plus détaillée des propriétés de base du modèle de boîte JS (exemples dimages et de texte)

  • clientTop / clientLeft : largeur des bordures gauche et supérieure
    Lexplication la plus détaillée des propriétés de base du modèle de boîte JS (exemples dimages et de texte)

offset

  • offsetWidth / offsetHeight : largeur et hauteur de la zone visible de ​​la boîte
    (1) offsetWid th : clientWidth+ bordures gauche et droite
    (2) offsetHeight : clientHeight+ bordures supérieure et inférieure
    Lexplication la plus détaillée des propriétés de base du modèle de boîte JS (exemples dimages et de texte)

  • offsetParent : Récupère son objet de référence parent (pas nécessairement l'élément parent)
    Trouvez le objet de référence parent :
    (1) Dans le même plan, l'élément le plus externe est la référence parent de tous les éléments descendants ;
    (2) En fonction de la position : absolue/relative/fixe, l'élément se détachera du flux documentaire et deviendra un nouveau plan, changeant ainsi la référence parent de l'élément ;
    ( 3) L'objet de référence parent du corps est nul.

  • offsetTop / offsetLeft : Décalage haut/gauche par rapport à sa référence parent (de la bordure extérieure de l'élément courant à la bordure intérieure de l'élément de référence parent)
    Lexplication la plus détaillée des propriétés de base du modèle de boîte JS (exemples dimages et de texte)

scroll

  • scrollWidth / scrollHeight : Oui La largeur et la hauteur réelles à l'intérieur de la fenêtre
    (1) Lorsqu'il n'y a pas de débordement de contenu : scrollWidth/Height = clientWidth/Height
    (2) S'il y a un débordement, il est différent Le résultat est approximativement égal à la largeur et à la hauteur. du contenu réel de la boîte : remplissage supérieur et inférieur + la largeur et la hauteur du contenu réel ;
    (3) Tant qu'un débordement se produit, la valeur du débordement modifiera également le résultat du défilement dans une certaine mesure.
    Lexplication la plus détaillée des propriétés de base du modèle de boîte JS (exemples dimages et de texte)

  • scrollTop/scrollLeft : La hauteur/largeur de la barre de défilement verticale/horizontale curl
    Lexplication la plus détaillée des propriétés de base du modèle de boîte JS (exemples dimages et de texte)
    Remarque : Parmi les attributs ci-dessus, seuls scrollLeft et scrollTop peuvent définir des valeurs, les autres attributs sont en lecture seule

Recommandations associées : [Tutoriel vidéo JavaScript]

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal