1

好的，基本上我需要帮助来创建一个在鼠标点击时增加字体大小的代码。这是一个示例： 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 网站欢呼一样工作

4

5 回答 5

3

我想你可能把事情复杂化了。我会更多地从 CSS 的角度来处理这个问题，并通过 JS 做一些小的工作。我会：

  • 在容器元素上使用类名
  • 使用 CSS 设置几种不同尺寸的样式
  • 单击加号/减号链接时使用JS更改类名

HTML：

<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";
}
于 2013-02-27T19:45:03.757 回答
2

如果您的 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 元素。

我认为“更大”和“更小”按钮比三种预定义尺寸更易于用户使用。

于 2013-02-28T04:43:18.133 回答
1

与其只为您的网站这样做，不如将图标保留在那里，但是当有人按下它们时，您会显示一个弹出窗口，说明缩放/字体大小增加已内置于几乎所有浏览器中？

这解决了编写脚本的复杂性或字体大小使用的间隔，此外，它还有一个额外的好处，那就是让用户知道他们使用的几乎所有网站都可以使用此功能。

您还可以进行一点 UA 嗅探以确定他们应该按下哪个热键并在弹出窗口中显示。

于 2013-03-02T21:10:27.700 回答
0

就个人而言，我不建议每次单击将字体大小增加/减少 1。这是因为您必须迭代许多元素并设置字体大小。我建议使用 3-5 类来定义字体大小并设置为正文以影响更多元素。但是如果你坚持每次点击字体大小增加/减少1，你可以参考下面的代码。如果您想从标题中选择元素，您可以像这样选择它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);
}
于 2013-02-27T19:38:11.457 回答
0

我建议您仅更改页面缩放。这不会破坏网站的设计。

<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>

于 2016-03-20T22:12:01.107 回答