javascript page zoom - Stack Overflow

admin管理员组

文章数量:1391947

Hi i develop my web site and i want to make two buttons (+ and -) with functions of ctr+ and ctr- for zoom in and zoom out of whole web page in all browsers. I need javascript code for this purpose Can anybody help?

Hi i develop my web site and i want to make two buttons (+ and -) with functions of ctr+ and ctr- for zoom in and zoom out of whole web page in all browsers. I need javascript code for this purpose Can anybody help?

• javascript

Share Improve this question Follow asked May 12, 2011 at 11:49 user750487user750487 1,06322 gold badges1212 silver badges1313 bronze badges 3

• 3 As you pointed out, browsers have this feature built in. Why do you feel the need to simulate it with a UI that users' won't be familier with? – Quentin Commented May 12, 2011 at 11:52
• Similar question: stackoverflow./questions/2578354/… – stivlo Commented May 12, 2011 at 11:58
• This is client request... Not my :) – user750487 Commented May 12, 2011 at 12:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I hope this helps you ! This will zoom the entire body tag

var currentZoom = 100;
function zoom(paramvar)
{
  currentZoom += paramvar;
  document.body.style.zoom =  currentZoom + "%" 
}

<button onclick="zoom(+10);">Zoom In</button>
<button onclick="zoom(-10);">Zoom Out</button>

You have apply a logic to retain the current zoom size and increment/decrement parameter to find the required width. You can customize the following function as per your requirement.

function zoom()
{
var wdth = 1024; //Change this variable to match your configuration
document.body.style.zoom = screen.width/1024;
document.Fm.TxAre.value=1024;
alert("1024 ? : "+screen.width/1024);
}

This is just a quick solution. There are lot of better options available in the web. Just thought of sharing an easy method without using third party solution.

you can use

document.body.style.zoom

also in CSS :

element{zoom:<value>;}

本文标签： javascript page zoomStack Overflow