Valeur de cette activité : 5 points
Compétence :
43 - Modifier une propriété CSS en utilisant Javascript

A-Module 04 : JAVASCRIPT : 5 points - difficulté : 2

Modifier une propriété CSS en utilisant Javascript

Description

Dans cette activité, vous allez apprendre à modifier une propriété CSS en utilisant le langage Javascript.

IMPORTANT : le résultat attendu est que :
- au total, 3 propriétés d'une balise DIV seront modifiées sur un évènement onmouseover
ET
- ces 3 propriétés de la balise DIV seront également modifiées (retour à leur valeur initiale) sur un évènement onmouseout

  1. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 60332
  2. Inscrivez dans le champ titre : Modifier une propriété CSS en utilisant Javascript
  3. Sélectionnez la section : MODULE JAVASCRIPT
  4. Sélectionnez la matière : informatique
  5. Inscrivez dans le champ no de la directive : 60332
  6. Inscrivez dans votre page le titre de niveau 1 : Modifier une propriété CSS en utilisant Javascript

    PARTIE 1 : suivez le guide

  7. Insérez dans votre page une division (bouton DIV)

    Remarquez que cette division utilise les propriétés de style suivantes :
    border:1px solid red;
    color:green;
    background-color:yellow;
    width:900px;
    height:auto;

  8. Identifiez cette division du nom de "madiv". <div id="madiv" style="border:1px solid red;color:green;background-color:yellow;width:900px;height:auto;"></div>
  9. Insérez le texte suivant dans cette division : "Modifier une propriété CSS en utilisant Javascript"
  10. Ajoutez AVANT la division un lien inactif qui utilise les évènements onmouseover et onmouseout sur le texte "Survolez ce lien". <a href=javascript:void(0) onmouseover="" onmouseout="">Survolez ce lien</a>
  11. Ajoutez dans l'évènement onmouseover la commande javascript qui modifiera la propriété couleur d'arrière-plan de la division madiv en orange. <a href=javascript:void(0) onmouseover="document.getElementById('madiv').style.backgroundColor='orange';" onmouseout="">Survolez ce lien</a>
  12. Ajoutez dans l'évènement onmouseout la commande javascript qui modifiera la propriété couleur d'arrière-plan de la division madiv à jaune. <a href=javascript:void(0) onmouseover="document.getElementById('madiv').style.backgroundColor='orange';" onmouseout="document.getElementById('madiv').style.backgroundColor='yellow';">Survolez ce lien</a>

    PARTIE 2 : À toi de jouer

  13. Consulte le tableau suivant afin de connaître l'équivalent JAVASCRIPT des propriétés CSS :
    Nom de la propriété en CSS Nom de la propriété en Javascript
    background background
    background-attachment backgroundAttachment
    background-color backgroundColor
    background-image backgroundImage
    background-position backgroundPosition
    background-repeat backgroundRepeat
    border border
    border-bottom borderBottom
    border-bottom-color borderBottomColor
    border-bottom-style borderBottomStyle
    border-bottom-width borderBottomWidth
    border-color borderColor
    border-left borderLeft
    border-left-color borderLeftColor
    border-left-style borderLeftStyle
    border-left-width borderLeftWidth
    border-right borderRight
    border-right-color borderRightColor
    border-right-style borderRightStyle
    border-right-width borderRightWidth
    border-style borderStyle
    border-top borderTop
    border-top-color borderTopColor
    border-top-style borderTopStyle
    border-top-width borderTopWidth
    border-width borderWidth
    clear clear
    clip clip
    color color
    cursor cursor
    display display
    filter filter
    font font
    font-family fontFamily
    font-size fontSize
    font-variant fontVariant
    font-weight fontWeight
    height height
    left left
    letter-spacing letterSpacing
    line-height lineHeight
    list-style listStyle
    list-style-image listStyleImage
    list-style-position listStylePosition
    list-style-type listStyleType
    margin margin
    margin-bottom marginBottom
    margin-left marginLeft
    margin-right marginRight
    margin-top marginTop
    overflow overflow
    padding padding
    padding-bottom paddingBottom
    padding-left paddingLeft
    padding-right paddingRight
    padding-top paddingTop
    page-break-after pageBreakAfter
    page-break-before pageBreakBefore
    position position
    float styleFloat
    text-align textAlign
    text-decoration textDecoration
    text-decoration: blink textDecorationBlink
    text-decoration: line-through textDecorationLineThrough
    text-decoration: none textDecorationNone
    text-decoration: overline textDecorationOverline
    text-decoration: underline textDecorationUnderline
    text-indent textIndent
    text-transform textTransform
    top top
    vertical-align verticalAlign
    visibility visibility
    width width
    z-index zIndex
  14. Identifie ou ajoute au style de la division "madiv" 2 autres propriétés CSS de ton choix.
  15. Utilise l'exemple du lien "Survolez ce lien" afin de modifier les 2 propriétés que tu as identifiées/ajoutées à la division "madiv" sur chacun des évènements onmouseover et onmouseout.

    Piste de solution :
    <a href=javascript:void(0) onmouseover="document.getElementById('madiv').style.backgroundColor='orange';LE_CODE_DOIT_ÊTRE_AJOUTÉ_ICI" onmouseout="document.getElementById('madiv').style.backgroundColor='yellow';LE_CODE_DOIT_ÊTRE_AJOUTÉ_ICI">Survolez ce lien</a> Lorsque tu désires ajouter une propriété à modifier sur un évènement, tu dois remplacer le texte "LE_CODE_DOIT_ÊTRE_AJOUTÉ_ICI" de l'exemple ci-dessus par

    document.getElementById('madiv').style.___NOM_DE_LA_PROPRIÉTÉ_À_MODIFIER___='___VALEUR_DE_LA_PROPRIÉTÉ__';

    exemple :

    document.getElementById('madiv').style.color='violet';
  16. IMPORTANT : le résultat attendu est que :
    - au total, 3 propriétés de la balise DIV seront modifiées sur l'évènement onmouseover
    ET
    - ces 3 propriétés de la balise DIV seront également modifiées (retour à leur valeur initiale) sur l'évènement onmouseout
  17. Visualisez votre page et apportez des modifications au besoin.
  18. Vous auriez pu également placer le code javascript de modification des propriétés css dans des fonctions javascript : voir le code ci-dessous
    <script>
    function on()
    {
    document.getElementById('madiv').style.backgroundColor='orange';
    }
    
    function off()
    {
    document.getElementById('madiv').style.backgroundColor='yellow';
    }
    
    </script> <a href=javascript:void(0) onmouseover="on()" onmouseout="off()"> Survolez ce lien</a> <div id="madiv" style="border:1px solid red;color:green;background-color:yellow;width:900px;height:auto;">sdfsdf</div>