7
votes

Afficher les valeurs de largeur et de hauteur en direct sur la modification de la fenêtre Redimensionner

dans la tête HTML:

<script type="text/javascript">
    document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>

javascript resize

2 commentaires

Est-ce que cette question piste Stackoverflow aidait?

J'ai trouvé le code ci-dessus sur le Web. Je suis totalement un débutant. Si quelqu'un peut écrire le code entier (compléter mon code ci-dessus) ce serait génial. Merci.

4 Réponses :

12
votes

Bind to window.Resize code>. N'utilisez pas document.write () code>. Placez le

code> dans votre HTML et donnez-lui un identifiant. Ensuite, il suffit de définir directement le InnerHTML de l'élément:

window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
    // your size calculation code here
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};

1 commentaires

Cela fonctionne bien sur la redimensionnement de la fenêtre, merci beaucoup. Comment puis-je aussi l'afficher pour la première fois, ouvrez la page ou après une recharge?

4
votes

ou, si vous utilisez déjà jQuery, vous pouvez utiliser .Resize ( gestionnaire i>) code> pour capturer l'événement de redimensionnement et .Resize () code> sans paramètres pour déclencher l'événement initial lorsque la fenêtre est effectuée en cours de chargement.

Comme ceci: p>

$(window).resize(function() {
    // your size calculation code here
    $("#dimensions").html(myWidth);
}).resize();

0 commentaires

24
votes

J'aime la solution de Gilly3, mais il serait utile d'avoir le code complet (pour ceux qui sont pressés!)

<script>
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
    };
</script>

0 commentaires

0
votes

<!DOCTYPE html>
<html>
<head>
<title>How to get width of screen when window is resizing?</title>
</head>
<body>
<script>
window.onresize=function()
{
    document.body.innerHTML=window.innerWidth;
}
</script>
</body>
</html>
To learn the meaning of the each line of the code - https://jaischool.com/javascript-lang/how-to-get-live-width-of-window-when-it-is-resizing.html

0 commentaires