• 締切済み

JavaScriptのフォントの大きさ

JavaScriptでの文字の大きさの変更について教えてください 以下のコードなのですが gamesの文字を大きくしたいです でも下記のコードのやり方だとだめでした font-sizeでは無理なのでしょうか? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <title>間違い探しゲーム!</title> <style> span { cursor:pointer; } mozi { font-size:40px; } </style> </head> <body> <h1>間違い探しゲーム!</h1> <p><input type="button" value="開始" onclick="gameStart();"></p> <p id="score"></p> <div id="cells"></div> <script> var level = 0; var games = [ ['問','間'], ['大','太'], ['白','臼'] ]; games.className = "mozi"; var MAX_LEVEL = games.length - 1; var DIM_FIRST = 5; var DIM_DELTA = 3; var dim = DIM_FIRST; var t1; var t2; function gameStart() { var dummy = games[level][0]; var seikai = games[level][1]; if (level == 0) { $('#score').empty(); t1 = new Date().getTime(); } //dim*dimのspan要素を使って#cellsに突っ込む //ゲーム画面5*5にする var cells = ''; for (var i = 1; i <= dim * dim; i++) { cells += '<span id="s' + i + '"></span>'; if (i % dim == 0){ cells += '<br />'; } } $('#cells').html(cells); //dummyで埋められた配列を作る var chars = []; for (var i = 0; i < dim * dim; i++){ chars.push(dummy); } //配列のうち一つを正解にする var offset = Math.floor(Math.random() * chars.length); chars.splice(offset, 1, seikai); //span要素にそれらの配列の値をはめ込む for (var i = 1; i <= chars.length; i++) { $('#s'+i).text(chars[i - 1]); $('#s'+i).click(function(){ if ($(this).text() == seikai) { level++; dim += DIM_DELTA; if (level > MAX_LEVEL) { t2 = new Date().getTime(); $('#score').text('Your SCORE is '+(t2-t1)/1000+'!!'); level = 0; dim = DIM_FIRST return false; } gameStart(); } }); } } </script> </body> </html>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

スクリプトで生成された要素にはクラス設定がされていませんので、CSSで指定したつもりかも知れませんが、対象とはなりません。 また、他の方もご指摘のように  mozi { font-size:40px; } は、 .mozi{ ~~ } でないとクラスが対象とはなりません。 DOMの構造がご提示のままなら、クラス設定などなくても  #cells span { font-size: 40px; } とか、  #cells { font-size: 40px; } で、充分事足りるように思いますが・・・

すると、全ての回答が全文表示されます。
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

誤) mozi {} 正) .mozi {} 誤) games.className = "mozi"; 正) $('#cells').addClass("mozi"); or 誤) cells += '<span id="s' + i + '"></span>'; 正) cells += '<span id="s' + i + '" class=mozi></span>'; 個人的なオススメ <style>#cells span { font-size:40px; }</style>

すると、全ての回答が全文表示されます。

専門家に質問してみよう