4
votes

Comment calculer la hauteur du triangle css?

Voici un simple triangle (non isocèle):

<div id="triangle-up"></div>

#triangle-up {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

Comment puis-je calculer sa hauteur en javascript?

javascript html css

4 commentaires

Faut-il une formule à calculer? La hauteur n'est-elle pas juste égale à la valeur inférieure de la bordure

vous pouvez penser que le duplicata est faux, mais le duplicata vous expliquera comment le triangle est construit ainsi vous connaîtrez chaque dimension et vous pourrez identifier la hauteur (comme celle-ci: stackoverflow.com/a/15546077/8620333 )

@TemaniAfif Si vous le pensez vraiment, je ne discuterai pas avec vous, car vous êtes un utilisateur expérimenté sur ce site et vous savez mieux.

Je ne sais pas mieux et si vous n'êtes pas d'accord, vous pouvez toujours dire pourquoi et argumenter. Je peux probablement essayer de donner plus d'arguments pour vous convaincre

3 Réponses :

3
votes

La hauteur correspond à la bordure rouge de 100 pixels.

La largeur totale est de 80 pixels: Le côté gauche de la pointe supérieure à la pointe gauche horizontalement est de 30 pixels. Le côté droit de la pointe supérieure à la pointe droite horizontalement est de 50 pixels.

Comment obtenir cela en Javascript:

const triangle = document.querySelector('#triangle-up');
const trianlgeStyles = window.getComputedStyle(triangle);
const triangleHeight = triangleStyles['border-bottom-width'];

0 commentaires

5
votes

Utilisez simplement DOM offsetHeight pour obtenir le réel hauteur (y compris les rembourrages et les bordures, mais à l'exclusion des contours) d'un objet:

<div id="triangle-up"></div>

#triangle-up {
  width: 0;
  height: 0px;
  border-left: 30px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

var height=document.getElementById("triangle-up").offsetHeight;
console.log(height)

0 commentaires

2
votes

La hauteur du triangle sera bottom-border - top-border . Dans l'extrait, comme vous pouvez le voir lorsque la bordure supérieure est affichée, elle se trouve directement au-dessus de la bordure inférieure et à partir du bas, la bordure inférieure s'étend 100px jusqu'au haut , ce qui lui donne la hauteur de 100px.

<div id="triangle-up"></div>

#triangle-up {
  width: 0;
  height: 0px;
  border-left: 30px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  border-top: 1px solid black;
}

0 commentaires