Modifier fontStyle à l'intérieur d'un string
Résolu/Ferméchabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 - 28 août 2022 à 18:46
- Modifier fontStyle à l'intérieur d'un string
- Comment modifier un pdf - Guide
- Modifier liste déroulante excel - Guide
- Modifier dns - Guide
- Logiciel agencement interieur - Guide
- Modifier story facebook - Guide
6 réponses
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.
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
26 août 2022 à 14:35
Oui..... tu mets ta variable dans un SPAN .. et tu appliques le styles sur ce span...
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.
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"
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question27 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
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