WEB相談室

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

タイトル:JSでスタイル操作

0:[投稿] すすむ [2002/11/04 15:49 ][環境:WIN+IE わからない]

初めまして。Javascriptでスタイルシートを操作したいと思っています。
具体的には、タグに対するclassを変化させたいと思っています。
通常、IDを指定すると簡単にできるようなのですが、
IDに限らず、タグで指定する方法をご存じの方がいらしたら
是非教えてください。よろしくお願いします。

現在のところ、bodyに対しては、簡単に操作できました。たとえば
<style type="text/css">
<!--
.change{
font-size: 50px;
}
-->
</style>
などclassを作成しておいて、スクリプトとして
document.body.className = 'change';
など動作させると、bodyに対してのスタイルが適応されるようです。
同様に、たとえばtableなどのタグに対しても同じような操作を
したいと思って、
document.table.className = 'change';
としても、(当然ながら)エラーとなってしまいます。
通常ですと、ID(たとえばidname)を指定して、
document.all("idname").className = 'change';
で問題なく操作できますが、都合上タグに対してのクラスを
指定したいと思っています。わからないなりに、
document.documentElement
document.getElementsByTagName
tagName
などいろいろと試してみたのですが、どれもうまくいきませんでした。
何となく、getElementByTagNameなんかを使うのではないかと思うのですが、
どうもうまくいきません。
最終的には他に、スタイルを直接指定する方法として、
document.**.style.fontsizeというのも考慮しているのですが、
やはり同じくタグを指定できないので、同じ疑問で行き詰まっています。

もしも、よいやり方をご存じの方がいらっしゃいましたら、
教えてください。よろしくお願いします。


1:[回答] ween [2002/11/04 16:35 ]

document.getElementsByTagName('table') は、
全ての table 要素のリスト(NodeList)を返します。
className 等を変更するような操作は
このリスト内の個々の table 要素に対して行います。

var tables = document.getElementsByTagName('table');
for ( var i=0; i<tables.length; i++ ) tables[i].className='change';

あと思いついたのは
若干内容の異なる操作なので用途に合わないかもしれませんが
table 要素に対する空のCSS規則 table {} を作っておいて
http://www.ybi.co.jp/koike/qa2000/qa2487.htm
のような方法でこの規則を取得して操作する、とか。


2:[質問] すすむ [2002/11/04 17:40 ]

weenさん!どうもありがとうございます。本当に、感謝、むしろ
感動しています! 正常に動作できました。

非常に恐縮なのですが、ほんと無勉強で恐縮なのですが、
NodeListなどとかの部分をあまり理解できていません。
とても的のはずれた質問かと思いますが、どうしてlengthが
いるのかとか、その長さでどうして要素を特定できるのか、
要素ってそもそも何があるのかとかがわかっていません。
bodyタグではいらなかったのにと思ったりして。簡単に教えて
いただけるようでしたら、是非とも教えてほしいです。もしも
自分で勉強すべき基本事項でしたら、もしもよろしければ、
この辺りを勉強するのにわかりやすいサイトなどご存じでしたら
紹介していただけないでしょうか。不躾ですが、よろしくおねがい
します。

早速のご教授、ありがとうございました。


3:[質問] すすむ [2002/11/04 17:49 ]

続けてなのですが、tableの要素のlist(?NodeList)ということは、
classNameだけではなくて、たとえばwidthとか、値を
取得して、Javascriptでそのwidthを変化させるという
ことも可能になるのでしょうか?かなり初めの主旨とは
異なった質問を続けてしまっていますが、よろしかったら
是非とも教えてください。


4:[質問] すすむ [2002/11/04 18:31 ]

この掲示板にgoogoleから来ていたので、大変失礼だったかもしれません。こちらのサイトに、DOMについてもその他、講座ページが
あることに気がつきました。
もし、よろしかったら、上の質問に個別に教えていただけると
理解の助けになりそうです。また、もっともっと基礎的なサイトなど
ご存じでしたら、紹介してもらいたいかもしれません。


5:[回答] ween [2002/11/04 20:03 ]

> 要素ってそもそも何があるのか
識者の総つっ込みが入りそうですが…タグで表しているものが要素です。

DOMでは、HTML/XML文書を構成している様々なものを Node といい、
テキストを表す Textノード、
コメント(<!-- -->) を表す Commentノード、
要素を表す Elementノードなどがあります。

NodeList とは、Node を配列のように順序をつけて並べたオブジェクトです。
NodeList.length は、 NodeList 内の Node の数を表します。
NodeList[i] (またはNodeList.item(i)) は、 NodeList の中の i 番目の Node を表します。
※Arrayオブジェクトではないので sort() とか reverse() とかは出来ません。

document.getElementsByTagName(tagName) というメソッドが何をするのかというと
文書内に存在する tagName という名前の要素全てが出現順に並ぶ NodeList を返す、ということです。
たとえば、 tables = document.getElementsByTagName('table') であれば:
tables は、文書中の table 要素全てを並べた NodeList を表します。
tables.length は、文書中に出現する table 要素の数を表します。
tables[i] は、文書中で i 番目に出現する table 要素を表します。
tables[i].className は、文書中で i 番目に出現する table 要素の class 属性を表します。

> Javascriptでそのwidthを変化させるということも可能になるのでしょうか?
HTMLの属性は大抵その要素を表すElementノードのプロパティになっているので
基本的には属性の取得も設定も可能です。
勿論例外もあるし、変更の結果を画面に反映させる機能を
ブラウザが持っているかというと、それは別の話になりますが。

> もっともっと基礎的なサイトなど
残念ですが私も知りません…すみません。


6:[完了] すすむ [2002/11/04 23:02 ]

weenさん、本当にどうもありがとうございました。
最後に書いていただいた内容もじっくりと考えてみます。

また何か困ったことがあったときは、是非よろしくお願いします。
ありがとうございました。失礼します。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World