Récupérer la valeur d'une valeur CSS (ici la hauteur d'un div) via javascript

[carabao]

Bonjour

J'aimerai récupérer la valeur d'une valeur CSS (ici la hauteur d'un div) via javascript ou autre

J'essaye le code suivant, placé dans le body, mais sans résultat

<script>
var el = document.getElementById('items-row.cols-3.row-0.row-fluid.clearfix');
var style = el.getAttribute('style'); // On récupère l'attribut « style »
el.setAttribute('style', '--hauteur:'+el.clientHeight+'px;'); // On édite l'attribut « style »
</script>

j'ai un résultat null

items-row.cols-3.row-0.row-fluid.clearfix correspond au div pour l'affichage en 3 colonnes: https://www.caravane-camping.be/


Le but, après avoir récupéré la valeur de la hauteur du div parent (items-row.cols-3.row-0.row-fluid.clearfix) des 3 colonnes d'une même ligne, c'est de fournir via les règles CSS au div qui englobe chaque article, la hauteur de ce div parent (items-row.cols-3.row-0.row-fluid.clearfix) , ce qui permettra d'avoir automatiquement la bonne valeur pour min-height pour les trois articles.


C'est suite à mon message ici: https://forum.joomla.fr/forum/joomla...89#post2041389 . Le problème actuellement, c'est que si un des 3 articles est trop long, les bordures de ceux-ci s'ajustent à la hauteur de l'article bien mais pas les bordures des 2 autres articles qui respectent la valeur min-height définies dans CSS.

Si les 3 articles ont une hauteur inférieure à min-height pas de soucis, les bordures des 3 articles sont à la même hauteur.

J'espère que c'est mon explication est assez claire. Si pas n'hésitez pas à me le dire, Merci

[pmleconte]

Bonjour,


getElementById récupère les infos d'un élément par son id, or, vous avez mis les classes de votre colonne, donc, normal que le résultat soit nul : voir https://www.w3schools.com/jsref/met_...lementbyid.asp

Essayez de passer par getElementsByClassName : voir https://www.w3schools.com/jsref/met_...yclassname.asp

En mettant document.getElementsByClassName('items-row cols-3 row-0 row-fluid clearfix') vous devriez avoir plus de résultat avec el[0].getAttribute('style').

A essayer,

Pascal

[carabao]

Merci pour la correction.

[FONT=courier new]<script>[/FONT]
var el = document.getElementsByClassName('items-row.cols-3.row-0.row-fluid.clearfix');
var style = el.getAttribute('style'); // On récupère l'attribut « style »
el.setAttribute('style', '--hauteur:'+el.clientHeight+'px;'); // On édite l'attribut « style »
[FONT=courier new]</script>[/FONT]

Le el[0] c'est pourquoi ? un echo el ne fonctionne pas

Mais tout reste à faire: utilisation de la donnée height trouvée, pour changer le style CSS 'height' d'un autre élément.

Un très grand merci

[pmleconte]

Bonsoir,

La commande getElementsByClassName retourne un tableau contenant tous les éléments correspondants à la recherche.

Pour votre site, j'ai assumé qu'il n'y avait qu'une seule div contenant les 5 classes, donc el[0] qui est le 1er élément du tableau.

Si vous avez plusieurs div avec les 5 classes demandées, la commande retournera un tableau avec les éléments trouvés : dans ce cas, il faut analyser tous les éléments comme dans l'exemple suivant : https://www.w3schools.com/jsref/tryi...classname_loop

Pascal

[pmleconte]

Remarque : la commande getElementsByClassName recherche les 5 classes qui doivent être séparées par un espace et non un point.

[carabao]

[FONT=courier new]<script>
var hauteurdiv = document.getElementsByClassName('items-row cols-3 row-0 row-fluid clearfix');
var style = hauteurdiv.getAttribute("style"); // On récupère l'attribut « style »
hauteurdiv.setAttribute("style", "--hauteur:"+hauteurdiv.clientHeight+"px;"); // On édite l'attribut « style »
</script>[/FONT]

dans la console

Uncaught TypeError: hauteurdiv.getAttribute is not a function
    <anonymous> https://www.caravane-camping.be/:1672

je ne comprends pas trop l'erreur.. getAttribute est bien une fonction pourtant.

[carabao]

bon, je continue mes recherches

{source}<script>
var hauteurdiv = document.getElementsByClassName('items-row cols-3 row-0 row-fluid clearfix')[0];
var style = hauteurdiv.getAttribute("style"); // On récupère l'attribut « style »
hauteurdiv.setAttribute("style", "--hauteur:"+hauteurdiv.clientHeight+"px;"); // On édite l'attribut « style »

document.write (hauteurdiv.clientHeight)

</script>{/source}



document.write (hauteurdiv.clientHeight) m'affiche bien 375

Maintenant il me reste à mettre ce nombre dans la variable height de la régle CSS ci-après

.tck-article.item.column-1,.tck-article.item.column-2,.tck-article.item.column-3 {
height:375px;
}

[carabao]

bon,

j'essaye de comprendre le code

si je mets

[FONT=courier new]<script>
var hauteurdiv = document.getElementsByClassName('items-row cols-3 row-0 row-fluid clearfix')[0];[/FONT]
document.write (hauteurdiv.clientHeight)
[FONT=courier new]</script>[/FONT]

il m'affiche la hauteur du div "items-row cols-3 row-0 row-fluid clearfix" , par exemple 318

Maintenant il me reste à mettre ce nombre dans la variable height de la régle CSS ci-après

.tck-article.item.column-1,.tck-article.item.column-2,.tck-article.item.column-3 { height:375px;

}

[carabao]

bon,

[FONT=courier new]<script>[/FONT]

var hauteurdiv = [FONT=courier new]document.getElementsByClassName("items-row cols-3 row-0 row-fluid clearfix")[0].offsetHeight[/FONT];

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-1")[0].style.height = hauteurdiv+"px";

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-2")[0].style.height = hauteurdiv+"px";

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-3")[0].style.height = hauteurdiv+"px";

[FONT=courier new]</script>[/FONT]

le code semble fonctionner pour les 3 bordures entourant les articles du blog (ligne 1) ont la même hauteur.


Par contre pour la deuxième ligne , cela ne fonctionne pas

var hauteurdiv2 = [FONT=courier new]document.getElementsByClassName("items-row cols-3 row-1 row-fluid clearfix")[0].offsetHeight[/FONT];

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-1")[0].style.height = hauteurdiv2+"px";

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-2")[0].style.height = hauteurdiv2+"px";

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-3")[0].style.height = hauteurdiv2+"px";

je continue mes recherches pour la deuxième ligne

var hauteurdiv2 = [FONT=courier new]document.getElementsByClassName("items-row cols-3 row-1 row-fluid clearfix")[1].offsetHeight[/FONT];

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-1")[1].style.height = hauteurdiv2+"px";

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-2")[1].style.height = hauteurdiv2+"px";

[FONT=courier new]document.getElementsByClassName[/FONT]("[FONT=courier new]tck-article item[/FONT] column-3")[1].style.height = hauteurdiv2+"px";

ne fonctionne pas non plus


EDIT: je me demande si en ajoutant la class du div supérieur cela ne fonctionnerait pas ?
par exemple:

pour la règle CSS

".[FONT=courier new]row-0 .tck-article.item[/FONT].column-1"

la règle css d'essai est bien appliquée (color:red)

en JS

document.getElementsByClassName

("[FONT=courier new]row-0 tck-article item[/FONT] column-1")[0].style.height = hauteurdiv2+"px";

ne fonctionne pas, la hauteur "hauteurdiv" n'est pas appliquée. A-t-il moyen de mettre deux class CSS venant de div différent ?




Après il restera à appliquer cela que pour la règle responsive "@media screen and (min-width: 1025px)"

[carabao]

J'abandonne pour le moment l'utilisation du javascript pour ce problème d'affichage. Merci pour votre aide.

[daneel]

J'abandonne pour le moment l'utilisation du javascript pour ce problème d'affichage. Merci pour votre aide.

oui je t'ai envoyé en messagerie privée, une solution pour aligner en css donc pas besoin de javascript.
C’était pour t'aider à régler temporairement en attendant une migration sur J4. Après, je n'ai pas eu de réponse donc je suppose que tu est passé à autre chose.

Avec la methode du javascript, tu risque d'afficher des mauvais alignements qui seront ensuite adaptés, cela peut aller très vite tout en restant perceptible et désagréable.
Après on peut ajouter un preloader pour contourner le problème, ce n'est pas idéal. Parfois, les solutions demandées ne sont pas les meilleures.

Prioritairement, on choisira l'écriture de la css qui offrent aujourd'hui de nombreuses possibilités bien plus grandes et validées par les navigateurs actuels sur tous supports (dektop, tablette et smartphone). Sous Joomla 4, on utilise les classes css de boostrap et de nombreuses possibilités combinés avec cssgrid. A travers le forum, j'essaye de démocratiser la création de template tout en proposant de faire évoluer cassiopeia soi-même.

Dans tous les cas, bon courage et n'hésite pas à ouvrir de nouveaux fils de discussion lors de ta migration.