OK,基本上我需要帮助创建一个代码,增加字体大小的鼠标点击。下面是一个例子:http://www.rnib.org.uk/在右上角有3个AAA增加页面字体大小等
当前代码是
// JavaScript Document
var min = 12;
var max = 32;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for (i = 0; i < p.length; i++) {
if (p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px", ""));
} else {
var s = 12;
}
if (s != max) {
s += 1;
}
p[i].style.fontSize = s + "px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for (i = 0; i < p.length; i++) {
if (p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px", ""));
} else {
var s = 12;
}
if (s != min) {
s -= 1;
}
p[i].style.fontSize = s + "px"
}
}
在HTML中实现如下:
<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>
我的只适用于标记为'p'的项目,谁能帮助我创建它,使功能像RNIB.org网站干杯
我想你可能把事情弄得太复杂了。我会更多地从CSS的角度来解决这个问题,并通过JS做一点小的工作。我想:
- 在容器元素上使用类名
- 使用CSS样式设置几个不同的尺寸
- 使用JS在点击加减号链接时更改类名
<a href="javascript:smallFontSize();">Small Font</a>
<a href="javascript:largeFontSize();">Large Font</a>
<a href="javascript:normalFontSize();">Normal Font</a>
<div id="myContainer" class="size-normal">
<h1>Some header</h1>
<p>Some paragraph</p>
<ul>
<li>Some list item</li>
</ul>
</div>
CSS: #myContainer.size-normal { font-size: 12px; }
#myContainer.size-large { font-size: 14px; }
#myContainer.size-small { font-size: 10px; }
JS:
var containerEle = document.getElementById('myContainer');
function smallFontSize() {
containerEle.className = "size-small";
}
function largeFontSize() {
containerEle.className = "size-large";
}
function normalFontSize() {
containerEle.className = "size-normal";
}
如果你的CSS设置了body font-size设置为100%,所有元素的字体大小定义为1.1 em, 1.5em等。然后你的按钮可以触发这些来增加或减少整个页面的字体大小。
document.getElementsByTagName('body')[0].style.fontSize.smaller;
document.getElementsByTagName('body')[0].style.fontSize.larger;
所有元素将改变相对于其他元素的大小,例如,你的h1, h2等将仍然比你的p元素大。
我认为"更大"one_answers"更小"的按钮比三个预定义的大小更方便用户使用。
不只是为你的站点这样做,如果你把图标保留在那里,但是当有人按下它们时,你会显示一个弹出窗口,解释缩放/字体大小增加是内置的,几乎每个浏览器都有?
解决了编写脚本或字体大小间隔的复杂性,而且它还有一个额外的好处,即告诉用户这个功能几乎在他们使用的任何网站上都是可用的。
您还可以做一点UA嗅探,以确定他们应该按哪个热键,并在弹出窗口中显示。
我个人不建议每次点击都增加/减少1的字体大小。这是因为您必须迭代许多元素并设置字体大小。我建议使用3-5类来定义字体大小,并设置为body来影响其他元素。但是,如果您坚持每次单击增加/减少1的字体大小,则可以引用以下代码。如果你想从header中选择元素,你可以这样选择:document.getElementById("menu").getElementsByTagName("h1")
function increaseFontSizeInternal(list) {
for(i=0;i<list.length;i++)
{
var s = 12;
if(list[i].style.fontSize)
{
s = parseInt(list[i].style.fontSize.replace("px",""));
}
if(s!=max)
{
s += 1;
}
list[i].style.fontSize = s+"px"
}
}
function increaseFontSize()
{
var paragraph = document.getElementsByTagName('p');
increaseFontSizeInternal(paragraph);
var links = document.getElementsByTagName('a');
increaseFontSizeInternal(links);
var headerInMenu = document.getElementById("menu").getElementsByTagName("h1")
increaseFontSizeInternal(headerInMenu);
}
function decreaseFontSizeInternal(list)
{
for(i=0;i<list.length;i++)
{
var s = 12;
if(list[i].style.fontSize)
{
s = parseInt(list[i].style.fontSize.replace("px",""));
}
if(s!=min) {
s -= 1;
}
list[i].style.fontSize = s+"px"
}
}
function decreaseFontSize()
{
var paragraph = document.getElementsByTagName('p');
decreaseFontSizeInternal(paragraph);
var links = document.getElementsByTagName('a');
decreaseFontSizeInternal(links);
var headerInMenu = document.getElementById("menu").getElementsByTagName("h1")
decreaseFontSizeInternal(headerInMenu);
}
我建议您只更改页面缩放。这不会破坏网站的设计。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:$('body').css({'zoom':parseFloat($('body').css('zoom'))+0.1})">A+</a><br>
<a href="javascript:$('body').css({'zoom':parseFloat($('body').css('zoom'))-0.1})">A-</a>