需要 - Javascript 按钮以利用 Web 浏览器中的 Ctrl + 和 - 键盘快捷键

Question

我正在尝试在网页上创建一个按钮来增加页面大小，字体大小图像大小等。这是针对特殊需要学校网站，以使其更易于访问。网站是 www.applefieldsschool.co.uk。请注意，这是一项正在进行的工作。

到目前为止，我已经设法想出了这个;

<button onclick="body.style.zoom='300%'">Zoom 300%</button>

这有效，但只是放大页面上呈现的内容并且没有响应。我的页面是HTML5和CSS3，可以响应不同的视口大小等。

如果我使用键盘快捷键 Ctrl+ 和 Ctrl- 这完全符合我的需求。我现在需要编程一个按钮来利用键盘快捷键。

可悲的是，这有点超出了我的javascript技能（我只是在上周才开始使用），提前感谢。

Answer 1

无法告诉您的浏览器"使用 CTRL + + 键"。

这是另一个线程，其中列出了一些可能的替代方案。特别：

body {
   transform: scale(1.1);
   transform-origin: 10% 10%;
   // add prefixed versions too.
}

您还可以设置font-size 。除非您在 em 中完成所有大小，这是相对于字体大小的，否则这不会真正缩放页面，但它会（显然（更改字体的大小（您可能仍然可以接受）。

Answer 2

你可以试试这个：

var value = event.keyCode;

从onkeydown="keyCode(event);"调用它

这是键码列表：http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 3

我想缩放是特定于浏览器的（如果我错了，请告诉我）我建议添加多种样式，这些样式可以附加到网站上并由自己定义。

例如，一些 CSS

/*default -no styles*/
body
{
   font-size: 14px;
}
body.big
{
   font-size: 20px;
}
body.omg
{
   font-size: 25px;
}
body.omg img
{
    width: 150%;
}

这样做的痛苦在于，只有文本会被放大。您必须处理某些项目以使它们看起来更大。就像示例中的<img>一样。

然后你可以在按钮点击时解决样式（你也许应该使用类似jQuery的东西来使它更干净......

<button onClick="document.getElementsByTagName('body')[0].className ='big';">+ Zoom</button> 
<button onClick="document.getElementsByTagName('body')[0].className ='omg';">++ Zoom</button> 

在工作示例中更新此处，使用 jQuery： http://jsfiddle.net/9DCry/