bonjour

Je cherche la solution pour modifier une règle des style via du javascript. Le but étant d'aligner les bordures inférieures pour les trois articles, pour mon site www.caravane-camping.be (page d'accueil), se trouvant sur la même ligne (row-0 et row-1) quelque soit la longueur de l'article.

Car si j'emploie min-height et que la hauteur d'un des articles dépasse la valeur définie dans min-heigh, les bordures de celui-ci seront ajustées à cet article mais les autres bordures des articles restant respecteront la règle css min-height (si les hauteurs des autres articles sont plus petites que min-height).



Voilà où j'en suis pour le moment

1e étape
script en construction

Pour l'affichage de la première ligne des articles en blog
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
var hauteurdiv = document.getElementsByClassName("items-row cols-3 row-0 row-fluid clearfix")[0].offsetHeight;
document.getElementsByClassName("tck-article item column-1")[0].style.height = hauteurdiv+"px";
document.getElementsByClassName("tck-article item column-2")[0].style.height = hauteurdiv+"px";
document.getElementsByClassName("tck-article item column-3")[0].style.height = hauteurdiv+"px";

les bordures inférieures sont bien alignées.


Pour l'affichage de la deuxième ligne des articles en blog
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
var hauteurdiv2 = document.getElementsByClassName("items-row cols-3 row-1 row-fluid clearfix")[0].offsetHeight;
document.getElementsByClassName("tck-article item column-1")[0].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-2")[0].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-3")[0].style.height = hauteurdiv2+"px";
les bordures inférieures ne sont pas bien alignées.


j'ai essayé aussi en mettant

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
var hauteurdiv2 = document.getElementsByClassName("items-row cols-3 row-1 row-fluid clearfix")[1].offsetHeight;
document.getElementsByClassName("tck-article item column-1")[1].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-2")[1].style.height = hauteurdiv2+"px";
document.getElementsByClassName("tck-article item column-3")[1].style.height = hauteurdiv2+"px";
sans plus de résultat



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

pour la règle CSS ".row-0 .tck-article.item.column-1" la règle css d'essai est bien appliquée (color:red)

en JS
Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
document.getElementsByClassName("row-0 tck-article item 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 dans getElementsByClassName venant de div différent ?


2e étape
Après il restera à appliquer cela que pour la règle responsive @media screen and (min-width: 1025px) (affichage sur grand écran)



Merci