JavaScriptのフォントの大きさ

締切済

質問者：DreamyLife_615
質問日時：2014/07/14 15:17
回答数：2件

JavaScriptでの文字の大きさの変更について教えてください
以下のコードなのですが
gamesの文字を大きくしたいです
でも下記のコードのやり方だとだめでした
font-sizeでは無理なのでしょうか？

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></sc …
<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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2014/07/15 13:57

スクリプトで生成された要素にはクラス設定がされていませんので、CSSで指定したつもりかも知れませんが、対象とはなりません。

また、他の方もご指摘のように
　mozi { font-size:40px; }
は、　.mozi{ ～～ }　でないとクラスが対象とはなりません。

ＤＯＭの構造がご提示のままなら、クラス設定などなくても
　#cells span { font-size: 40px; }
とか、
　#cells { font-size: 40px; }
で、充分事足りるように思いますが・・・

- 0
- 件

通報する

No.1

回答者： Ogre7077
回答日時：2014/07/15 10:00

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