1

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 Web サイトの歓声のように関数が機能するように、誰でも作成を手伝ってもらえますか

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

本文のフォント サイズを 100% に設定し、すべての要素のフォント サイズを 1.1 em、1.5em などに定義するように CSS が設定されている場合、ボタンでこれらをトリガーして、全体のフォント サイズを増減できます。ページ。

document.getElementsByTagName('body')[0].style.fontSize.smaller;
document.getElementsByTagName('body')[0].style.fontSize.larger;

次に、すべての要素のサイズが互いに相対的に変更されます。たとえば、h1、h2 などは p 要素よりも大きくなります。

「大きい」ボタンと「小さい」ボタンは、事前に定義された 3 つのサイズよりも使いやすいと思います。

于 2013-02-28T04:43:18.133 に答える
1

自分のサイトだけにこれを行うのではなく、アイコンをそこに残しておき、誰かがアイコンを押したときに、ズーム/フォントサイズの拡大がすでにほとんどすべてのブラウザーに組み込まれていることを説明するポップアップを表示するとどうなるでしょうか?

これにより、スクリプトを記述する複雑さや、フォント サイズに使用する間隔を回避できます。さらに、この機能は、使用するほぼすべての Web サイトで既に利用可能であることをユーザーに教えるという追加の利点があります。

UA スニッフィングを少し実行して、どのホットキーを押す必要があるかを判断し、それをポップアップに表示することもできます。

于 2013-03-02T21:10:27.700 に答える
0

個人的には、クリックごとにフォントサイズを 1 ずつ増減することはお勧めしません。これは、多くの要素を反復してフォント サイズを設定する必要があるためです。3-5 クラスを使用して font-size を定義し、body に設定して他の要素に影響を与えることをお勧めします。ただし、クリックするたびにフォント サイズを 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

ページのズームを変更するだけにすることをお勧めします。これにより、Web サイトのデザインが崩れることはありません。

<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 に答える