J'essaie de fournir une fonction sur une page HTML avec laquelle je peux zoomer et sortir du texte.
J'ai déjà essayé avec tous les navigateurs disponibles. Voici mon code: p>
p>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#zoomtext
{
transform: scale(1);
transition: transform 0.2s ease-in-out;
}
</style>
<script>
window.addEventListener("load", function()
{
var zoom = 1;
var zoomStep = 0.2;
});
document.getElementById("zoomIn").addEventListener("click",function(){zoom += zoomStep; document.getElementById("zoomtext").style.transform = "scale("+zoom+")";});
document.getElementById("zoomOut").addEventListener("click",function(){if(zoom > zoomStep){zoom -= zoomStep; document.getElementById("zoomtext").style.transform = "scale("+zoom+")";}});
</script>
</head>
<body>
<button id="zoomOut">-</button>
<button id="zoomIn">+</button>
<article>
<section id="zoomtext">
<p>This is a text that I want to be able to zoom in and out by means of the two buttons indicating plus and minus.</p>
</section>
</article>
</body>
</html>3 Réponses :
script code> à la fin de corps code> li>
- Attribuer
zoom, zoomstep code> variables en dehors de l'événement Callback Li>
p>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#zoomtext {
transform: scale(1);
transition: transform 0.2s ease-in-out;
}
</style>
</head>
<body>
<button id="zoomOut">-</button>
<button id="zoomIn">+</button>
<article>
<section id="zoomtext">
<p>This is a text that I want to be able to zoom in and out by means of the two buttons indicating plus and minus.</p>
</section>
</article>
<script>
var zoom = 1;
var zoomStep = 0.2;
document.getElementById("zoomIn").addEventListener("click", function() {
zoom += zoomStep;
document.getElementById("zoomtext").style.transform = "scale(" + zoom + ")";
});
document.getElementById("zoomOut").addEventListener("click", function() {
if (zoom > zoomStep) {
zoom -= zoomStep;
document.getElementById("zoomtext").style.transform = "scale(" + zoom + ")";
}
});
</script>
</body>
</html> Le problème avec votre code est que Voir un code de travail ici: https://codepen.io/marc -Simplon / stylo / vqywyq? Éditeurs = 1010 zoom et zoomstep ne sont jamais évalués. Le premier écouteur d'événement vient de créer une fonction, mais le code à l'intérieur de celui-ci n'est jamais exécuté.
Si vous devez régler le zoom de la fenêtre entière, cela pourrait ne pas être possible sans plug-in externe (voir Modification du niveau de navigateur Zoom )
Si vous souhaitez définir le zoom pour spécifiquement l'élément #ZOOMTEXT, vous pouvez utiliser l'attribut" ZOOM "CSS ( https://developer.mozilla.org/en-us/docs/web/css/zoom ), mais ce n'est pas standard. Une autre façon de gérer cela serait d'augmenter ou de diminuer l'attribut CSS de la taille de la police sur l'élément #ZOOMTEXT: P>
document.getElementById("zoomtext").style.fontSize = '12px'
Vous devez soit exécuter le script sur le document prêt à l'emploi, soit après avoir ajouté le code HTML à la page - au moment où les boutons n'existent pas lorsque vous faites votre getElementbyID car vous utilisez simplement le script de l'en-tête.