Y a-t-il un moyen d'obtenir le J'ai besoin de Ce que je dois faire est d'étirer l'arrière-plan d'un hauteur de ligne d'un span (ou autre élément inline) dans JavaScript / jQuery?
de hauteur en pixels , pas de valeurs du tri 1.2em , normal ou heuristique comme fontsize * 1.5 .
span pour remplir la hauteur totale de la ligne. Je pensais que je pouvais ajouter des pompiers pour étirer la portée, mais pour cela, j'ai besoin de la hauteur de ligne exacte exacte . Si quelqu'un peut offrir une autre approche, cela serait également utile.
4 Réponses :
$("span").css( "line-height");
Retrieves the computed px value as a string "16px" for example. It uses IE's currentStyle or the standard getComputedStyle under the covers. Which is kind of surprising seeing as when it works as a setter it does elem.style.something = value which is a whole different thing.
C'était la première chose que j'ai essayée, bien sûr. Malheureusement sur les navigateurs Webkit, il renvoie la chaîne "normale" à moins que je n'ai défini le Hauteur de ligne manuellement à l'avance. J'utilise JQuery 1.6.1. At-il un comportement différent dans les versions ultérieures?
@RADANGANCHEV Vous avez raison, il retourne normalement pour certains éléments. []. foreach.call (document.getelementsbytagname ("*"), fonction (v) {console.log (v) greatheightstyle (v) .lineheight);}); exécuter la valeur de la PX sur cette page pour la plupart des éléments cependant.
@Esailija Oui, si vous inspectez les éléments de cette page, vous verrez que la plupart d'entre eux ont un ensemble de la hauteur de ligne dans le CSS et quelques-uns ont par défaut ligne-hauteur . Pour ceux avec la valeur par défaut hauteur de ligne toujours "normale" s'affiche. Je l'ai testé sur mon site aussi et ça ne fait toujours pas le travail.
@RADANGANCHEV I RAN IT ON FONTSIZE ET J'ai reçu la valeur px pour tous - peut-être que la valeur px de la taille de la police est peut-être utilisée comme une hauteur de ligne quand elle est normale? w3.org/tr/csss21/visdet.html#propdef- Hauteur de ligne
@Esaysaja Oui, FontSize est calculé correctement. Malheureusement, la hauteur de la ligne n'est presque jamais égale à la taille de la police. Je pense que c'est un navigateur dépendant et dans la plupart des navigateurs, c'est quelque chose comme LineHeight = FontSize * 1.5 (c'est-à-dire pour hauteur de ligne: normale ).
@RADANGANCHEV OK Je pense que puis une approche différente est nécessaire pour résoudre votre problème. Je n'ai vraiment pas compris ce que vous essayez de faire en premier lieu j'admettre. Pouvez-vous donner un exemple en jsfiddle?
@Esaysaysa ici est un exemple. L'utilisation de polices personnalisées spécifiques rend le problème beaucoup plus évident. Dans mon cas, un espace de 5 à 6 pixels apparaît entre les lignes séparées de la surbrillance span . Ce que je dois faire est de trouver la hauteur exacte de ces lignes pour faire la portée (respectivement de son arrière-plan) s'étendre pour combler les lacunes.
supposer que la portée est contenue dans un div.
Vous pouvez définir la DIV en position: relative
et la plage en tant que bloc qui prend 100% de hauteur.
De cette façon, vous allez étirer la portée comme vous le souhaitez.
exemple ici (Remarque: pour voir l'effet, changez la couleur de fond de la portée en transparent. Vous devriez pouvoir voir la DIV rouge.)
J'utilise un span , car j'ai besoin d'un élément en ligne. Mon objectif est de marquer du texte qui peut commencer au milieu d'une ligne. Affichage: Bloc ne fonctionne pas pour moi.
Si votre conception le permet, vous pouvez appliquer en ligne-block aux éléments que vous ciblez puis utilisez outerheight ...
Un moyen facile de faire est le suivant:
var style = window.getComputedStyle(element);
var lineHeight = style.getPropertyValue('line-height');
Votre portée doit avoir l'affichage: bloc, quelque chose comme
span {hauteur de la ligne: 12px; Affichage: bloc;}