1

たとえば、1から10までの値を入力し、値が1に設定されている場合はすべてのフォントサイズが元であり、10の場合は各要素のフォントサイズが10*元のサイズに変更される機能を実行するにはどうすればよいですか。 ？

サイトには何千もの要素（単語）が存在する可能性があることに注意してください。

パフォーマンスは非常に重要です

4

4 に答える 4

1 
document.body.style.fontSize = document.getElementById('myInput').value + 'em';

これを機能させるには、ページ全体で相対的なフォント サイズを使用する必要があります。

また、CSS で値を使用する前に、値にエラー チェックを追加する必要があります。

于 2012-10-04T15:54:10.633 に答える
0

私はあなたのためにあなたが求めることをするべき小さなスクリプトを作りました。フォントサイズを変更する必要のある何百もの異なる要素がない限り、パフォーマンスは実際には問題にはなりません。ただし、これらの要素内に含まれる単語の数は実際には重要ではありません。

スクリプトは次のとおりです。

// Store elements that should change font size
var $changeElements = $(".change-font-size");
// Hook into the keyup event of your input
$("input").keyup(function(){
    // Let's get the multiplier
    var multiplier = parseFloat($(this).val(), 10);
    // Loop through elements
    $changeElements.each(function(){
        var $this = $(this);
        // Get saved font size from dataset
        var fontSize = $this.data("font-size");
        if (!fontSize) {
            // Get original font size from css and save it to dataset
            // parseInt automagically removes "px"
            fontSize = parseInt($this.css("fontSize"), 10);
            $this.data("font-size", fontSize);
        }
        // Calculate and set the new font size
        $this.css("fontSize", fontSize * multiplier);
    });
});​

jsFiddleのテストケースを参照してください

于 2012-10-04T15:59:07.107 に答える
0

入力の値に応じてサイズを再定義するルーティンを作成する必要があります。次のようになります。

$(document).ready(function(){
  // Increase Font Size
  $("#increaseFont").change(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*$("#increaseFont").val();
    $('html').css('font-size', newFontSize);
    return false;
  });
});
于 2012-10-04T15:59:10.227 に答える
0

これが私のフィドルです：http://jsfiddle.net/digitalpunch/A6V6e/4/

基本的に、最初に必要な要素をすべて選択して、DOM を 1 回だけトラバースし、入力テキスト ボックスで keyup イベントを発生させます。Chrome でテスト済み。かなり高速に動作します-フィドルで多くのテキストを使用しました。

がんばれダモ

[編集:] 一般の要望により、ここにフィドルのコードがあります:

Size: <input type="text" id="size_var"></input>
<p>Lorem ipsum dolor sit amet, consectetur adipi</p>

$(function() {
    var $p = $('p');
    var origSize = $p.css('font-size');
    origSize = origSize.substr(0, origSize.length - 2);                  
    $('#size_var').keyup(function() {
        var multiplier = $(this).val();
        var size = origSize;
        size *= multiplier;
        $p.css({
            'font-size': size + 'px'
        });
    });
});​

[編集2:]

p を選択する代わりに、body または html タグを選択して、そのフォント サイズを変更できます。これは、すべての子にカスケード (継承) されます。他の子要素が font-size をオーバーライドしないようにしてください。このようにして、多くの要素を反復処理する必要はありません。

于 2012-10-04T16:22:47.220 に答える