Académique Documents
Professionnel Documents
Culture Documents
a- .btn:hover {
background-color: green;
color: white;
}
b- .btn:hover {
height: 40px;
border: 1px solid green;
}
c- .btn:active {
height: 40px;
background-color: green;
border: 1px solid green;
}
2- On souhaite colorer en rouge les éléments li de la liste ul. Compléter le code CSS qui
permet d’appliquer le style « couleur verte et mettre en gras » au li numéro : 2, 6, 10….
« 2pts »
1
On souhaite colorer en rouge les <style>
éléments li de la liste ul. Compléter le
code CSS qui permet d’appliquer le ……………………………………… {
style « couleur verte et mettre en font-weight: 800;
gras » au li numéro : 2, 6, 10…. color: green;
}
</style>
a- li:nth-child(4n + 2)
b- li:nth-child(6n + 4)
c- li:nth-child(2,6,10)
<script>
document.querySelectorAll('tr').forEach((item, i)
=> {
……………………………………………………………………………
…
})
</script>
a- item.children[(4-i)].style.backgroundColor="green";
b- item.children[i].style.backgroundColor="green";
c- let color = ‘green’
2
6- On souhaite charger en mode AJAX les données du web service : https://test.com/joueurs
Compléter le code suivant pour afficher les noms des joueurs sous forme de liste <li> « 2pts »
</ul>
<script>
fetch('https://test.com/joueurs')
.then(reponse => reponse.json())
.then(data => {
data.forEach(element => {
…………………………………………………………………………………………………………………………
});
})
</script>
a- document.querySelector('li').innerHTML = element.name
b- ul = "<li>" + element.name + "</li>"
c- document.querySelector('ul').innerHTML += "<li>" + element.name + "</li>"
7- On dispose d’un tableau html des notes. On souhaite colorer en vert les notes supérieurs
à 10. « 2pts »
<script>
document.querySelectorAll('td').forEach(item => {
……………………………………………………………………………………………. ;
})
</script>
a- item.style.color = "green"
b- if(item.innerText >= 10) item.style.color = "green"
c- style.color = "green"
3
10- Compléter le code javascript qui permet de colorer toutes les cellules de
la table en diagonale par sélection des <tr> « 2pts »
<script>
document.querySelectorAll('tr').forEach((item,
i) => {
………………………………………………………………………
………
})
</script>
d- item.children[(4-i)].style.backgroundColor="red";
e- item.children[i].style.backgroundColor="red";
f- for(let i=0;i<4;i++)
for(let j=0;j<4;j++)
li.color[i+j] ="red"
<script>
document.querySelectorAll('td').forEach(item => {
……………………………………………………………………………………………. ;
})
</script>
d- item.style.color = "red"
e- if(item.innerText <= 10) item.style.color = "red"
f- style.color = "red"
4
</ul>
<script>
fetch('https://jsonplaceholder.typicode.com/users')
.then(reponse => reponse.json())
.then(data => {
data.forEach(element => {
…………………………………………………………………………………………………………………………
});
})
</script>
a- document.querySelector('li').innerHTML = element.name
b- document.querySelector('ul').innerHTML += "<li>" + element.name + "</li>"
c- ul = "<li>" + element.name + "</li>"
$(document).ready(function () {
var direction = 'down';
function escalier() {
let decalage = '';
if (
............................................................................. ) {
decalage = '-=100px';
direction = 'up';
}
if (parseInt($("div").css("left")) == 0 || direction
== 'down') {
decalage = '+=100px';
direction = 'down';
}
$("div").animate({left: decalage}, 1000)
.animate({top: decalage}, 1000, escalier);
}
escalier();
});