Connaître la taille d'un bloc en temps réel

Version imprimable

bonjour
actuellement je fait ça pour changer mon display grid en block en fonction de la taille.
Code:

1 2 3 4 5 6 7 #contentAu { display: grid; grid-gap: 2px; grid-auto-flow: column; margin: auto; box-sizing: border-box; }
Code:

1 2 3 4 5 6 7 8 const carouselAu = document.getElementById("carouselAu"), contentAu = document.getElementById("contentAu"), nextAu = document.getElementById("nextAu"), prevAu = document.getElementById("prevAu"); if (contentAu.scrollWidth == carouselAu.offsetWidth){ contentAu.style.display = "block"; }
par contre si on fait a l'arrache avec le partage de 2 fenêtre windows ça ne fonctionne pas...je suis obliger de refresh la page pour que les valeur change.
il y a un moyen pour savoir la taille sans refresh ?

31/10/2023, 13h59
SpaceFrog

une piste ?
https://www.developpez.net/forums/d2...gueur-d-texte/

merci
j'avais trouver ça... je suis pas loin mais ça merde

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function resizeWindow(oEvent) {
    contentAu.style.display = "grid";
    var newWidthcontau = contentAu.scrollWidth;
    var newWidthcarau = carouselAu.offsetWidth;
    var newWidth = window.innerWidth;
    console.log(newWidthcontau);
    console.log(newWidthcarau);
    if (window['oTailleOld'].width == null || window['oTailleOld'].width != newWidth) {
        if (newWidthcontau == newWidthcarau) {
            contentAu.style.display = "block";
            nextAu.style.display = "none";
        }
        else {
            contentAu.style.display = "grid";
            nextAu.style.display = "flex";
        }
    }
    window['oTailleOld'] = {
        widthcontau: newWidthcontau,
        widthcarau: newWidthcarau,
        width: newWidth
    };
}
//fct 
window['oTailleOld'] = {
    width: null,
    widthcontau: null,
    widthcarau: null
};
document.addEventListener('DOMContentLoaded', function() {
    window.addEventListener('resize', resizeWindow);
    resizeWindow();
});

par contre je comprend pas les newWidthcarau et newWidthcarau change bien en fonction de la fenêtre mais elles sont toujours égal.
si je refresh la page elle sont différent :calim2:

EDIT : enfin trouvé... pour ce que ça intéresse il faut mettre en le contenu du div en display grid avant la lecture.

02/11/2023, 09h22
Doksuri

hellow, pourquoi ne pas passer par le getBoundingClientRect() (en JS) developer.mozilla.org/fr/docs/Web/API/Element/getBoundingClientRect
ou bien avec le @container query (en css) developer.mozilla.org/en-US/docs/Web/CSS/@container ?
02/11/2023, 18h45
NoSmoking

Bonjour,
il eut été bon de fournir la structure HTML pour ne pas avoir à patauger dans le vague !

Il existe également une solution tout à fait intéressante qui utilise l'API Resize Observer, cela permet d'alléger pas mal le code sur le resize.