Solution avec jQuery
Avec jQuery, le code est très concis et facile à lire. Il suffit d’ajouter une classe temporairement pour obtenir l’effet de surlignement.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Surligner une div avec jQuery</title>
<style>
.highlight {
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">Ceci est ma div à surligner.</div>
<button onclick="highlightDiv()">Surligner</button>
<script>
function highlightDiv() {
$("#myDiv").addClass("highlight");
setTimeout(function() {
$("#myDiv").removeClass("highlight");
}, 2000); // Surligne pendant 2 secondes
}
</script>
</body>
</html>Solution sans jQuery (pur JavaScript)
Voici la même fonctionnalité, mais avec du JavaScript natif.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Surligner une div sans jQuery</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">Ceci est ma div à surligner.</div>
<button onclick="highlightDiv()">Surligner</button>
<script>
function highlightDiv() {
const myDiv = document.getElementById("myDiv");
myDiv.classList.add("highlight");
setTimeout(function() {
myDiv.classList.remove("highlight");
}, 2000); // Surligne pendant 2 secondes
}
</script>
</body>
</html>