object.style.zoom = "value"; <zoom> =
normal |
reset |
<number> |
<percentage> <number> An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage> Specifies the percentage using a number followed by a percent sign (%).
<!doctype html>
<html>
<head>
<style>
img
{
zoom: reset;
}
</style>
</head>
<body>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
zoom: 2;
}
</style>
</head>
<body>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<head>
<style>
img
{
zoom: 50%;
}
</style>
</head>
<body>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
</body>
</html>
<!doctype html>
<html>
<body>
<button>initial</button>
<button>normal</button>
<button>reset</button>
<button value="2">number</button>
<button value="50%">percentage</button><br>
<img alt="Happy Face" src="/assets/svg/HappyFace.svg">
<script>
function myfunction(myparameter)
{
document.querySelector("img").style.zoom = myparameter;
}
const myelements = document.querySelectorAll("button");
for(const myelement of myelements)
{
const myargument = myelement.value || myelement.innerHTML;
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>