WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:<style>を書き換えるJAVAscript

0:[投稿] gun [2002/11/21 16:18 ][環境:WIN+IE わからない]

[Win+IE5.5SP2以降+JAVAスクリプト]
---------------------------
<style type="text/css">
.font_class {
    font-weight: 10;
}
</style>
---------------------------
例えば、上のように設定したfont_classクラスのスタイルを
JAVAスクリプトで書き換えて、font_classクラスを割り振った
要素の見栄えを一気に変更してしまう手段はありますか?
ご存知の方、よろしくご教授お願い致します。


1:[回答] ヒソカ [2002/11/21 17:27 ]

CSSファイルを切り替える方法ではダメなんですか?


2:[回答] 平野 敬 [MAIL] [URL] [2002/11/21 17:49 ]

http://www.fczbkk.sk/js/get_elements_by_classname/


3:[回答] ひじ [2002/11/21 17:59 ]

body要素に適当なclass属性を設定して、それをJScriptで切り替えるのは?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
 <title>無題</title>
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <style type="text/css">
 body.style-a {
   background-color:#fcc;
 }
 body.style-b {
   background-color:#ccf;
 }
 body.style-a .font_class {
   font-weight:100;
 }
 body.style-b .font_class {
   font-weight:900;
 }
 </style>
</head>
<body class="style-a">
<ul>
   <li><button onclick="document.getElementsByTagName('body')[0].className='style-a'">style-a</button></li>
   <li><button onclick="document.getElementsByTagName('body')[0].className='style-b'">style-b</button></li>
</ul>
<p class="font_class">テキスト(font_class)</p>
<p>テキスト(normal)</p>
<p class="font_class">テキスト(font_class)</p>
</body>
</html>

# font-weight:10 って…


4:[回答] ween [2002/11/21 18:29 ]

IE6でしか確認してないんですが、おおざっぱに書くと
こんな感じの関数でIEのruleオブジェクトをセレクタから取得できると思います。

function getRuleBySelector ( selector ) {
 for ( var i=0, sheet; sheet=document.styleSheets[i++]; ) {
   if ( sheet.disabled ) continue;
   for ( var j=0, rule; rule=sheet.rules[j++]; )
     if ( rule.selectorText==selector ) return rule;
 }
}

<p class="font_class">test test test <input type="button"
onclick="getRuleBySelector('.font_class').style.fontWeight='bold'"></p>


5:[回答] gun [2002/11/22 00:22 ]

ヒソカさん、平野 敬さん、ひじさん、weenさん
ご回答どうもありがとうございます。
本日は解読する気力が残ってません(^^;ので、
明日、試させていただき、結果をご報告致します。

ちなみに私が行いたいことは、
(15列 x 1000行)ほどの大きさのテーブルで、チェックボックス
で選択した列のスタイルを変更することです。

JAVAスクリプトで1セルずつclassNameを変更していく方法
では、気が遠くなる程レスポンスが遅かったため、クラス
のスタイル自体を書き換えて一気に変更してしまう手段を
模索しております。
説明が足りずすみませんでした。


6:[回答] にゃあ! [MAIL] [2002/11/22 09:19 ]

IEだけでよいのなら、

<SCRIPT Language="JavaScript">
 function fontChange(id){
   id.outerHTML="<DIV id='abc' class='changed'>変更しました。<DIV>";
 }
</SCRIPT>
-----------------
<DIV id="abc" onClick="fontChange(abc)">変更前</DIV>


7:[回答] にゃあ! [MAIL] [2002/11/22 09:31 ]

スタイルだけを変えたいなら、

id.style.background="red";

列ごとに変えるなら、idを同じにして
for(i=0;i<1000;i++){
 id(i).style.background="red";
}

でできます。さすがに1000個もあると遅いかも。


8:[回答] 薫 [2002/11/22 10:12 ]

> スタイル自体を書き換えて
読解力不足かもですが、こんな感じなのでしょうか?
function hoge(a,b){
document.writeln("<style type=\"text/css\">");
document.writeln("font_" + a + "{ font-weight:" + b + "}");
document.writeln("</style> ");
}

それとも....
function hoge(a){
var seed = new Array(100,200,300,400);
for (i=1;i<=seed.length;i++){
x = seed[i] * a;
document.writeln("font_" + i + "{ font-weight:" + x + "}");
}
# ん〜わかんない!ごめんなさい(汗


9:[回答] gun [2002/11/22 13:10 ]

>ヒソカさん、ひじさん
クラス自体を切り換えてしまう方法、全然気付きません
でした。ただ、今回の場合は、2の15乗通りのクラスを
用意せねばならないようなので、この方法では無理みた
いです。別の機会に利用させていただきます。

>平野 敬さん
1つづつスタイルを変更していく方法になっているようで、
私が作成したものよりはレスポンスが良いのですが、
(15列 x 1000行)のテーブルのスタイルを変更するには
現実的なレスポンスではありませんでした。
プログラミングスタイルは参考にさせていただきます。

>weenさん
見事です。正に求めていたモノでした。
レスポンスは私の環境[Celeron500+Mem192MB, Win2Kpro+IE6]
で3秒前後です。
ありがとうございました。
下のような関数からcallして利用させて頂きます。
---------------------------------------------------------------------------
function chgRule( selector, chk ) {
    var rule;
    rule=getRuleBySelector(selector);
    if (chk) {
        rule.style.fontWeight='bold';
    }
    else {
        rule.style.fontWeight='normal';
    }
}


<input type="checkbox" value="col01" onclick="chgRule('.col01', this.checked)">
<input type="checkbox" value="col02" onclick="chgRule('.col02', this.checked)">
    :<略>
<input type="checkbox" value="col15" onclick="chgRule('.col15', this.checked)">
---------------------------------------------------------------------------

>にゃあ!さん
idを同じにしてfor文で回す方法は、私の環境で5秒前後
です。なかなかの好タイム(^^)。同じidを割り当てると
は、気づきませんでした。
この方法は別の機会に利用させていただきます。

>薫さん
私のつたない文章で混乱させてしまってごめんなさい。
新たにスタイルタグを書き出す薫さんの方法、私の知識
では表示後のドキュメントに対して文字列の追加をうま
く実現できず、ブラウザの表示がクリアされてしまいま
した・・・。
頂いたご回答を検証する前にコケてますね。
すみません。


10:[完了] gun [2002/11/24 12:04 ]

完了にしてませんでした。
みなさん、ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World