WEB相談室

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

タイトル:javaスクリプトとcssの連携に関する質問

0:[投稿] wata [2006/07/19 16:44 ] [環境:IE6, わからない]

背景色を変える場合、
下記のように書くと変えられますが、

document.all.item("line2",i).style.backgroundColor = "#FFFFCC";

色をじかに指定するのではなく、別ファイルのスタイルシートから取得したいです。その場合、どのように書けばよいでしょうか?
スタイルシートのbodyのbackground-colorを指定したいのですが・・・・。 教えてください。

スタイルシート*************
body {
 margin: 0px 0px 0px 0px;
 font-family: 'MS ゴシック';
 font-size: 10pt;
 /* 2005.05.30 debug mode start */
 /* background-color:#FFFFCC; */
 background-color:#ADADD1;
 /* 2005.05.30 debug mode end */
}
*******************


1:[回答] m035 [2006/07/19 21:17 ][URL]

CSSで直接指定しておけばいいと思うのですが。
どうしてわざわざJavaScriptを使わなければならないのか疑問です。
また、
>別ファイルのスタイルシートから取得
とのことですが、このCSSはhtml内で外部cssファイルとして読み込まれているのですか?

余談:
>document.all.item("line2",i).style.backgroundColor = "#FFFFCC";
このScriptはIEでしか動作しないと思われます。


2:[回答] m035 [2006/07/20 19:01 ][URL]

参考にどうぞ。
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=548


3:[質問] wata [2006/07/21 15:52 ]

>CSSで直接指定しておけばいいと思うのですが。
>どうしてわざわざJavaScriptを使わなければならないのか疑問で>す。
説明が不十分ですいません。
頁の背景色をただ変えるだけならば、m035さんのおっしゃるとおりスクリプトを使う必要がないですが、
今回は、各行に選択チェックのついた表で、選択チェックがONされた場合、その行の背景色のみ変えたいんです。
それで下記のスクリプトを使って色を変えようと思っているのですが、できれば色を直接指定するのではなく、
スタイルシートを利用したいのです。スタイルシートを利用する記述の仕方を教えてください。

    function backcolorChange() {
       var form =  document.om0010Form;
       var s = parseInt(form.start.value);
       var e = parseInt(form.end.value);
       var size = e - s + 1;
             
       if(e!=0) {
       
       for(i = 0; i < size; i++) {
            if(form.elements["header["+i+"].choice"].checked == true){
                          document.all.item("line1",i).style.backgroundColor = "#FFC0CB";
            }else{
                       document.all.item("line1",i).style.backgroundColor = "#ADADD1";
            }
        }}
    }

>このCSSはhtml内で外部cssファイルとして読み込まれているのですか?
このスクリプトが記述してあるJSPで下記のように定義し、外部CSSファイルとして読み込んでいます。
<LINK rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/style.css">


4:[回答] ミツ [2006/07/21 18:27 ]

インラインで書き加えた背景なら、それを無効にしてみては?

document.all.item("line1",i).style.backgroundColor = ""; //空文字を設定する。

あるいは透過指示 'taranceparent' を値として設定してみてもいいかも。


5:[回答] ミツ [2006/07/21 18:28 ]

スペルミスしました。
'taranceparent' → 'transparent'


6:[回答] m035 [2006/07/21 18:47 ][URL]

>document.all.item("line1",i)
document.allは>>1で述べたとおり使わないほうが無難です。

>>3
cssでクラスで背景色を設定しておき、classNameを使ってクラスを指定してみてはどうでしょう。
背景色の解除は背景にデフォルト色を指定したクラスを設定すれば出来ます。
checkboxのnameは"line1"で、背景色ありのクラスがcheck_yes、背景色なしのクラスがcheck_noのとき、>>3のfor部分のコードは以下のような感じで。

for(var i=0;i<size;i++){
   if(form.elements["header["+i+"].choice"].checked==true){
       document.getElementsByName("line1")[i].className="check_yes";
   }
   else{
       document.getElementsByName("line1")[i].className="check_no";
   }
}


7:[回答] 燕雀 [2006/07/23 16:46 ]

本題からそれる上にいらないお世話かもしれませんが,適切に文書構造を設計してDOMでアクセスすると,JavaScriptのコードの見通しが良くなります.例えば,

function checklistClick() {
 var boxobj= document.getElementById("listcheck");
 var checkboxobjs    = boxobj.getElementsByTagName("input");
    var gyosetsumeiobjs = boxobj.getElementsByTagName("p");
    for (i=0; i < checkboxobjs.length; ++i) {
      gyosetsumeiobjs[i].className= checkboxobjs[i].checked ? "backcoloron":"backcoloroff";
      }
 }

こんな感じになります.


8:[完了] wata [2006/07/25 13:56 ]

classNameを使ってクラスを指定してみます。
皆さん、アドバイスをどうもありがとうございました。


[戻る]