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

Résolu

chabinot Messages postés 391 Statut Membre -
chabinot Messages postés 391 Statut Membre - 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

Afficher la suite

6 réponses

Réponse 1 / 6
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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.
0

chabinot Messages postés 391 Statut Membre 16

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

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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

chabinot Messages postés 391 Statut Membre 16

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.

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
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

Réponse 4 / 6
chabinot Messages postés 391 Statut Membre 16

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
Réponse 5 / 6
chabinot Messages postés 391 Statut Membre 16

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 391 Statut Membre 16

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

Discussions similaires

Modifier une annonce ou le prix sur Leboncoin sans payer

Forum Javascript

Questions et réponses sur Javascript

Newsletters

Newsletters

Actu du jour

Voir un exemple