11528 sujets

JavaScript, DOM et API Web HTML5

Agrandir/réduire taille police avec JS

Bonjour à tous,

J'essaye de développer une fonction permettant d'agrandir et de réduire le texte.

La base de cette fonction est fonctionnelle , le problème est que je n'arrive pas à agir uniquement sur la sélection html...

En effet quand j'appuie sur agrandir ou réduire cela s'affecte souvent sur toute la zone et non uniquement sur la sélection comme je le voudrais

Connaissez-vous un moyen d'y parvenir ?

Coté twig:
<button title="Agrandir" onclick="changerTaille(1);" class="btn_boite_outil_crea_droite" style="margin-bottom:5px;">A<sup>+</sup></button>
<button title="Réduire" onclick="changerTaille(-1);" class="btn_boite_outil_crea_droite" style="margin-bottom:5px;">A<sup>-</sup></button>


Coté JS:
function changerTaille(modif){
	var a = getSelectionHtml();
	if(a != ''){
		console.log(a);
		t = t + modif; // valeur de la taille de police
		var id = window.getSelection().anchorNode.parentElement.parentElement.parentElement.id;
		verfi_taille_col_style_text(id);
		a = a.style.fontSize = t + "em";
		document.execCommand("fontSize", false, a); //change la taille de ce qui est sélectionné		
	}
}


L'erreur affiché dans ma console est la suivante : Cannot set property 'fontSize' of undefined
Pourtant mon a est bien une variable qui vaut quelque chose...

Dans l'attente de vos réponses,
Cordialement,
Julien
Modérateur
Bonjour,

Ce que tu essaies de faire me semble assez dur à réaliser (c'est rare que je dise ça).

Quel est le code des fonctions getSelectionHtml() et verfi_taille_col_style_text() ? (et ça ne serait pas plutôt verif_taille_col_style_text() d'ailleurs ?)

J'imagine que la variable a qui est le résultat de getSelectionHtml() est en fait une chaine de caractères qui est le code html de la sélection.

Or une chaine de caractères n'a pas de propriété style (ce sont les éléments html qui ont une propriété style). C'est pour ça que quand tu mets a.style.fontSize, il te dit "Cannot set property 'fontSize' of undefined", parce que a.style est justement indéfini, puisque a est une chaine de caractères et non un élément html. Est-ce que je me trompe ?

Il faudrait en fait récupérer les éléments html sélectionnés et non pas le code html de la sélection. Ce sont 2 choses bien différentes. Et ça ne me semble pas simple du tout, en particulier si la sélection commence ou finit au milieu d'un texte. Il faut probablement combiner.

Après, j'ai de gros doutes sur le fait que ce code soit "fonctionnel" et en particulier sur les lignes suivantes :
var id = window.getSelection().anchorNode.parentElement.parentElement.parentElement.id;

Pourquoi remonter aussi loin (à l'arrière grand-père) ? 

a = a.style.fontSize = t + "em";

Outre le fait que a.style.fontSize ne fonctionne pas (ce qui est en fait l'objet de ta question), tu veux vraiment changer la valeur a (qui était une chaine représentant du html) et lui donner comme valeur une taille de police ??? Tu économises le nombre de tes variables ? Smiley cligne 

document.execCommand("fontSize", false, a);

À ma connaissance, la commande ne peut s'appliquer qu'à des éléments html qui ont l'attribut contentEditable. Est-ce bien le cas ? Et de toute façon, quand il y a un élément de ce genre, la sélection ne peut se faire que sur son contenu ou une partie de son contenu, et pas sur les éléments voisins. Par ailleurs, il me semble que le paramètre a de la fonction document.execCommand() ne peut valoir ici que "1", "2", "3", ..., "7". Or la variable a vaut ici un nombre suivi de "em". Cette ligne ne fait donc probablement rien ou pas ce que tu attends.

Mais bon, on n'a pas tout le code javascript, et on n'a pas non plus le html sur lequel tu testes. Tout ça n'est que suppositions.

Amicalement,
Bonjour parshimoni,

Merci pour tes conseils, j'en prends note. Je reviendrais sur ce topic si j'ai des nouveautés à apporter !

Amicalement,
Julien
Sujet clos
Aller à