Modifier fontStyle à l'intérieur d'un string

Résolu/Fermé
chabinot Messages postés 327 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2023 - 26 août 2022 à 13:03
chabinot Messages postés 327 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2023 - 28 août 2022 à 18:46

Bonjour,

J'ai le code suivant ::

let number = numero[countMusic];
	number = number.big();
	number = number.fontcolor('0000FF');
	artist.innerHTML = '♬ ~ ' + number  + ' ~ ' + artists[countMusic] + ' ♬';

Je voudrais mettre à 'number' fontStyle('normal'), mais cela ne marche pas, j'ai cherché et n'ai rien trouvé.

Je vous remercie par avance.

Cordialement
 


Windows / Chrome 104.0.0.0

A voir également:

6 réponses

jordane45 Messages postés 37722 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 septembre 2023 4 616
26 août 2022 à 13:10

Bonjour,

Tu ne peux pas appliquer de "style" à une string.

Il faut la mettre dans un SPAN et appliquer le style sur cet élément html.


.
Cordialement,
Jordane

0
chabinot Messages postés 327 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2023 15
26 août 2022 à 13:54

Merci Jordane,

Je te mets les codes html et javascript concernant cette cha^ne de caratères :

<!-- Audio -->	
		<main class="music-container">
			<div class="music-progress">
				<div class="progressTimes">
					<p class="progres"><i></i></p>
					<div class="times">
						<p>0:00</p>
						<p>0:00</p>
					</div>
				</div>
			</div>
			<div class="controller">
				<div id="volume" class="item">
					<i class="fa-solid fa-volume-high"></i>
				</div>
				<div id="prev" class="item">
					<i class="fa-solid fa-backward"></i>
				</div>
				<div id="play" class="item">
					<i class="fa-solid fa-circle-play"></i>
				</div>
				<div id="next" class="item">
					<i class="fa-solid fa-forward"></i>
				</div>
				<div id="stop" class="item">
					<i class="fa-solid fa-stop"></i>
				</div>
			</div>
			<div class="marquee">
				<p id="artist"><span style="font-style: normal;" id="number"></span></p>
			</div>
		</main>	
const audioProgress = document.querySelector(".progres i");
const audioProgressTimes = document.querySelector(".progressTimes");
const artist = document.querySelector("#artist");
const [audioCurrentTime, audioDurationTime] = document.querySelector(".times").children;
const [volume, prev, play, next, stop] = document.querySelectorAll(".item");
const number = document.getElementById('number');

const audios = [
	'audio/whiterShade.mp3',
	'audio/sardou.mp3',
	'audio/brassens.mp3',
	'audio/nougaro.mp3',
	'audio/reggiani.mp3',
	'audio/Emily-Linge.mp3',
	'audio/belafonte.mp3'
];

const artists = [
	'Emily Linge ~ a whiter shade of pale',
	'Michel Sardou ~ ses meilleurs chansons',
	'Georges Brassens ~ ses meilleurs chansons',
	'Claude Nougaro ~ ses meilleurs chansons',
	'Serge Reggiani ~ ses meilleurs chansons',
	'Emily Linge ~ ses meilleures reprises',
	'Harry Belafonte ~ ses meilleurs chansons'
];

let numero = ['①', '⓶', '⓷', '⓸', '⓹', '⓺', '⑦'];

let interval;
let countMusic = 0;
let iconArray = [];
let audio = new Audio(audios[countMusic]);

const audioPlay = () => {
	let numbe = numero[countMusic];
	number = number.big();
	number = number.fontcolor('0000FF');
	artist.innerHTML = '♬ ~ ' + number  + ' ~ ' + artists[countMusic] + ' ♬';
	if (audio.paused) {
		audio.play();
		play.innerHTML = '<i class="fa-solid fa-pause"></i>';
		musicInterval();
	} else {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
}

const audioStop = () => {
	audioProgressTimes.style.display = 'block';
	if (!audio.paused) {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
		audio.currentTime = 0;
		timeFormatter();
}

const audioNext = () => {
	audioProgressTimes.style.display = 'block';
	if (!audio.paused) {
		audio.pause();
	}
	if (audios.length - 1 > countMusic) {
		++countMusic;
	} else {
		countMusic = 0;
	}
	audio = new Audio(audios[countMusic]);
	audioPlay();
	musicInterval();
}

const audioPrev = () => {
	audioProgressTimes.style.display = 'block';
	if (!audio.paused) {
		audio.pause();
	}
	if (0 < countMusic) {
		--countMusic;
	} else {
		countMusic = audios.lenght - 1;
	}
	audio = new Audio(audios[countMusic]);
	audioPlay();
	musicInterval();
}

const audioIsMuted = () => {
	audioProgressTimes.style.display = 'block'; 
	if (audio.volume > 0) {
		audio.volume = 0;
		volume.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>';
	} else {
		audio.volume = 1;
		volume.innerHTML = '<i class="fa-solid fa-volume-high"></i>';
	}
}

const musicInterval = () => {
	clearInterval(interval);
	interval = setInterval( () => {
		timeFormatter();
	}, 1000);
}

const timeFormatter = () => {
	audioCurrentTime.textContent = convertCurrent(audio.currentTime);
	audioDurationTime.textContent = convertHMS(audio.duration);
	audioProgress.style.width = ((audio.currentTime / audio.duration) * 100) + '%';

	if (audio.currentTime === audio.duration) {
		audioNext();
	}
}

const convertCurrent = (value) => {
	if (audio.duration > 3600) {
		let hours   = Math.floor(value / 3600); 
	  	let minutes = Math.floor(value % 3600 / 60); 
	  	let seconds = Math.floor(value % 3600 % 60);

	  if (minutes < 10) {minutes = "0"+minutes;}
	  if (seconds < 10) {seconds = "0"+seconds;}

	  return hours + ':' + minutes + ':' + seconds;
	} else {
		minutes = parseInt(value / 60);
		seconds = parseInt(value % 60);

		// if (minutes < 10) {minutes = "0"+minutes;}
		if (seconds < 10) {seconds = "0"+seconds;}

		return minutes + ':' + seconds;
	}
}

const convertHMS = (value) => {
    if (value < 3600) {
    	let minutes = parseInt(value / 60);
    	let seconds = parseInt(value % 60);
    	// if (minutes < 10) {minutes = '0' + minutes}
    	if (seconds < 10) {seconds = '0' + seconds}

    	return minutes + ':' + seconds;
    } else {
	    let hours   = Math.floor(value / 3600); 
	    let minutes = Math.floor(value % 3600 / 60); 
	    let seconds = Math.floor(value % 3600 % 60);

	    if (minutes < 10) {minutes = "0"+minutes;}
	    if (seconds < 10) {seconds = "0"+seconds;}

	    return hours + ':' + minutes + ':' + seconds; 
    }
}

play.addEventListener('click', audioPlay);
stop.addEventListener('click', audioStop);
next.addEventListener('click', audioNext);
prev.addEventListener('click', audioPrev);
volume.addEventListener('click', audioIsMuted);

La chaîne est en italique dans le CSS et je voudrais mettre le numero (number) en normal.

As tu une idée comment faire ?

Meci beaucoip,

Très cordialement

0
jordane45 Messages postés 37722 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 septembre 2023 4 616
26 août 2022 à 14:35

Oui.....  tu mets ta variable dans un SPAN .. et tu appliques le styles sur ce span...

0
chabinot Messages postés 327 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2023 15
Modifié le 26 août 2022 à 15:14

Bonjour Jordane,

J'ai trouvé, voilà ce que j'ai fait :

const number = document.getElementById('number');

const audioPlay = () => {
	number.innerHTML = '<span style="font-style: normal;">' + 
    numero[countMusic].fontcolor('FF0000').big() + '</span>';
	artist.innerHTML = '♬ ~ ' + number.innerHTML  + ' ~ ' + artists[countMusic] + ' ♬';
	if (audio.paused) {
		audio.play();
		play.innerHTML = '<i class="fa-solid fa-pause"></i>';
		musicInterval();
	} else {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
}

Encore merci de ton aide.

0
jordane45 Messages postés 37722 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 septembre 2023 4 616
Modifié le 26 août 2022 à 16:12

Heuuu.. je ne vois pas trop ce que tu as "trouvé" ..

Bon, en gros

	artist.innerHTML = '♬ ~ <span class="cequetuveux">' + number + '</span> ~ ' + artists[countMusic] + ' ♬';

Et dans ton fichier css, tu peux appliquer les styles que tu souhaites à la class "cequetuveux"

0
chabinot Messages postés 327 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2023 15
26 août 2022 à 17:33

Effectivement,

j'aurais dû procéder comme ça, cela marche en mettant le style au niveau du span.

Tu as raison, je vais le modifier.

Merci encore pour ton aide.

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
chabinot Messages postés 327 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2023 15
27 août 2022 à 16:22

Bonjour Jordane,

J'ai essayé de faire comme tu l'as suggéré, apparemment, ça ne fonctionne pas.

Comment procèderais tu ?

Cordialement

0
chabinot Messages postés 327 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2023 15
28 août 2022 à 18:46

Bonjour Jordane,

Ce que tu m'as conseillé de faire <span class="icon-num"> marche très bien, ce qui ne pouvait pas marcher est que je m'emmêlais dans les noms de classe que je donnais.

Voici les code sources Js et CSS :

let numero = ['<i class="fa-solid circle fa-1"></i>', '<i class="fa-solid circle fa-2"></i>', 
			  '<i class="fa-solid circle fa-3"></i>', '<i class="fa-solid circle fa-4"></i>', 
			  '<i class="fa-solid circle fa-5"></i>', '<i class="fa-solid circle fa-6"></i>', 
			  '<i class="fa-solid circle fa-7"></i>'];

let interval;
let countMusic = 0;
let iconArray = [];
let audio = new Audio(audios[countMusic]);

const audioPlay = () => {
	number.innerText = numero[countMusic];
	artist.innerHTML = '♬ ~ <span class="icon-num">' +  number.innerText + '</span> ' + artists[countMusic] + ' ~ ♬';
	if (audio.paused) {
		audio.play();
		play.innerHTML = '<i class="fa-solid fa-pause"></i>';
		musicInterval();
	} else {
		audio.pause();
		play.innerHTML = '<i class="fa-solid fa-circle-play"></i>';
		clearInterval(interval);
	}
}
  .icon-num {
   	font-style: normal;
  	font-size: 20px;
  	color: #f00;
  }
}
.circle {
	padding: 2px;
	width: 24px;
	height: 24px;
	text-align: center;
	border: 1px solid #f00;
	font-weight: 300;
	border-radius: 100%;
}

Et encore mille mercis pour ton aide.

Je clos et je le mets comme résolu

0