11521 sujets

JavaScript, DOM et API Web HTML5

Récupération de contenu pour inclusion dans CSS

Bonjour !

Encore débutante en JS (puisque je découvre sur mon temps libre), je venais pour une petite question ! Voilà, il y a peu j'ai compris comment récupérer des données via AJAX et autres mais je me retrouve face à une impasse pour la suite de mon codage et template.

J'aimerais récupérer le contenu d'une div pour l'inclure dans mon css. En effet, le contenu dépendant du membre, cela me permettrait de continuer la personnalisation de mon site. Pour illustrer :

J'ai mon HTML comme cela :

<div class="progression">80</div>


Et dans une autre partie de mon template, j'ai un bloc qui représente une barre et donc la largeur représenterait la progression. 

<div class="barre-progression"></div>


J'aimerais du coup écrire un script pour qu'automatiquement le contenu d'un div soit inclus dans le CSS comme cela : (ainsi le 80 serait récupéré)

.barre-progression {width:80px;
height:20px;
background:red;


Merci pour toute aide apportée !
Merci pour vos aides !

J'ai du coup, compris le tutoriel ( https://www.alsacreations.com/article/lire/1416-html5-meter-progress.html ) cependant, ce que je chercherais, c'est vraiment d'utiliser la valeur présente dans une div pour l'associer à une barre de progression. (Je joins une image de mes débuts pour expliquer).
Cette image est prise sur le profil d'un membre-test.
La valeur 80 représente les points obtenus par le membre pour ses actions, et la barre au dessus est la barre que j'essaie de faire (pour l'instant elle est fixée pour tous les comptes). Je me demandais du coup s'il y avait moyen d'inverser le tutoriel pour lire la valeur "80" et la placer dans la value de la barre de progression ?

https://zupimages.net/up/18/15/hhn9.png
Modifié par Ashling (15 Apr 2018 - 21:27)
Salut

Exemple avec la barre de progression qui modifie sa valeur selon le choix de l'utilisateur.

<label>Combien de points (entre 0 et 100) : </label><input id="points" type="number" min="0" max="100" step="1" value="30">
<div id="progression"> 
    <span>30</span>
    <progress min="0" max="100" step="1" value="30"></progress>
</div>



window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    
    // début code du test
    
    const 
        elemPoints = document.querySelector( '#points'),
        elemProgression = document.querySelector( '#progression' ),
        elemProgress = elemProgression.querySelector( 'progress' ),
        elemSpan = elemProgression.querySelector( 'span' );
    
    elemPoints.addEventListener( 'input', ev => {

        // debug, console, touche F12
        console.log( ev.target.value );

        // change la valeur et la barre de progression
        elemSpan.textContent = ev.target.value;
        elemProgress.value = ev.target.value;

    }, { capture: false, passive: true, once: false } );

    // fin code du test

}, { capture: false, passive: true, once: false } );
Merci également ! C'est ce style que je cherchais en effet ! Je me demandais juste s'il y avait moyen de ne pas laisser le membre choisir la valeur et juste lire la valeur affichée ? (Puisqu'ils ont pas accès aux points donnés)
La propriété textContent fonctionne en get/set, on peut donc lire le contenu texte de n'importe quel élément du DOM.

Exemple :

<p id="points">80</p>

const
elemPoints = document.querySelector( '#points'),
elemProgression = document.querySelector( '#progression' ),
elemProgress = elemProgression.querySelector( 'progress' ),
elemSpan = elemProgression.querySelector( 'span' );

elemSpan.textContent = elemPoints.textContent;
elemProgress.value = parseInt( elemPoints.textContent, 10 );
Sujet clos
Aller à