掲示板/JavaScript質問板/過去ログ/一覧/ フォントの変更

0 名前：み： 2006/10/20（金） 01:01 ID:hGCPzw/S: こんにちは。

<TABLE>のonResizeの際に、
テーブルのフォントとフォントサイズを変更したいと考えています。
実装は出来るのですが、表示件数が5000件と多く、
表示されるまでにかなり時間がかかってしまいます。（30秒程度）
上記の処理を行わなければ、3秒程度で表示されます。

動作を早くしたいと思っています。
何かいい方法はありますでしょうか？

ソースは以下の通りです。
function setCellWidth1(cnt) {

var tr="";
var tblw=0;
var fonts=20; //フォントサイズ
var weights="normal"; //フォント

if(document.getElementById('tbl')) {
tblw = document.getElementById('tbl').clientWidth;

//テーブルのサイズによって、フォントを変える
if(tblw<739) {
fonts="17";
weights="normal"
} else if (739<=tblw && tblw<1000) {
fonts="18";
weights="normal"
} else if (1000<=tblw && tblw<1350) {
fonts="22";
weights="normal"
} else if (1350<=tblw && tblw<1400) {
fonts="26";
weights="bold"
} else if (1400<=tblw) {
fonts="27";
weights="bold"
}

//セル、行の設定
for(i=1; i<=cnt; i++) {
tr = 'tr'+i;

document.getElementById(tr).style.fontSize = fonts;
document.getElementById(tr).style.fontWeight = weights;
}
}

1 名前： ラブーフ ： 2006/10/20（金） 01:01 ID:mGMjLPPf

こんにちは。
TR要素にID名を付けているようですが、必要なんでしょうか。
もし、このスクリプトだけのものであれば、これがスピードを
遅くしている大きな原因なので、ID名なしですませるやり方が
ベターです。あとは、ローカル変数を多用して、「ピリオド」を
減らすとか。forループの代わりにwhileループにするとか。

　自分のPCの場合、5000行に対して、みさんのやつでは、Firefoxだと、
11秒ほどかかりますが、以下のID名なしのやつだと、１秒以下になり
ました。

// セル、行の設定
 // trsという変数を用意、`ピリオド`を減らす。 
var trs = document.getElementById("tbl").getElementsByTagName("TR"); 
var i = 0, l = trs.length; // trs.length も予め。
while(i < l){
 trs[i].style.fontSize = fonts;
 trs[i].style.fontWeight = weights;
 i++;
}

　参考になれば。

2 名前：匿名： 2006/10/20（金） 01:01 ID:K326bbkp

同意。ピリオドを減らすのは大量のループだとじわじわ効いてくるよね。

ちなみに、インラインスタイルを使わなければループせずにすむ。速度は測ってないけど。

var ss = document.styleSheets[0];

// DOM CSS
ss.insertRule(
  'tr { font-size: ' + fonts + '; font-weight: ' + weights + '; }',
  ss.cssRules.length
);

/* IE
ss.addRule(
  'tr',
  'font-size: ' + fonts + '; font-weight: ' + weights
);
*/

3 名前： m035 ◆Wpzr1YKOiq ： 2006/10/20（金） 01:01 ［URL］ ID:vxWVB2xr: >>0
>>5のように、CSSを動的に制御しなくても、デフォルトを含め、6パターンのクラスを定義しておいて、classNameに指定すればいいのでは？

4 名前：匿名： 2006/10/20（金） 01:01 ID:K326bbkp: ああ、確かにclassを書き換えればすむ話だね。

それを言われて気付いたんだけど、font-size、font-weightは継承されるはずだから
document.getElementById('tbl').styleを書き換えるだけで全セルに反映されるはずだと思った。
# もし継承されないとすればそれはバグだし、IEなら標準モードにしておけば多分OKなはず。